<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>输入框下拉多选择插件Bootstrap Multiselect - 光年(Light Year Admin)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="js/runexample/runexample.min.css" rel="stylesheet"><!--该样式是示例中的运行和代码展示，使用Multiselect无需引入-->
<link href="js/bootstrap-multiselect/bootstrap-multiselect.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<style type="text/css">
#example-selectedClass-container li.multiselect-selected a label {
    color: red;
}
span.multiselect {
    padding: 2px 6px;
    font-weight: bold;
    cursor: pointer;
}
#example-selected-parents-container label.active {
    font-weight: bold;
}
#example-checkbox-list-container .checkbox-list > li > a {
    display: block;
    padding: 3px 0;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

#example-checkbox-list-container .checkbox-list > li > a:hover,
#example-checkbox-list-container .checkbox-list > li > a:focus {
    color: #333;
    text-decoration: none;
    background-color: transparent;
}

#example-checkbox-list-container .checkbox-list > .active > a,
#example-checkbox-list-container .checkbox-list > .active > a:hover,
#example-checkbox-list-container .checkbox-list > .active > a:focus {
    color: #333;
    text-decoration: none;
    background-color: transparent;
    outline: 0;
}

#example-checkbox-list-container .checkbox-list > .disabled > a,
#example-checkbox-list-container .checkbox-list > .disabled > a:hover,
#example-checkbox-list-container .checkbox-list > .disabled > a:focus {
    color: #777;
}

#example-checkbox-list-container .checkbox-list > .disabled > a:hover,
#example-checkbox-list-container .checkbox-list > .disabled > a:focus {
    text-decoration: none;
    cursor: unset;
    background-color: transparent;
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

#example-checkbox-list-container .checkbox-list > li > a > label {
    padding: 3px 0 3px 20px;
}

@media (min-width: 768px) {
    #example-checkbox-list-container .checkbox-list > li {
        float: left;
        width: 33%;
    }
    #example-checkbox-list-container .checkbox-list-vertical > li {
        float: none;
        width: 100%;
    }
}

#example-checkbox-list-container .multiselect-container.checkbox-list {
    position: static;
}
</style>
</head>
  
<body>
<div class="container-fluid">
  
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header"><h4>输入框下拉多选择插件 Bootstrap Multiselect</h4></div>
        <div class="card-body">
          
          <p>插件使用0.9.15版本，github地址：<a href="https://github.com/davidstutz/bootstrap-multiselect" target="_blank">https://github.com/davidstutz/bootstrap-multiselect</a>，中文文档：<a href="https://www.bootstrap-multiselect.cn/#getting-started" target="_blank">https://www.bootstrap-multiselect.cn/#getting-started</a>。</p>
          
          <div class="form-group">
            <select id="example-getting-started" multiple="multiple">
              <option value="cheese">Cheese</option>
              <option value="tomatoes">Tomatoes</option>
              <option value="mozarella">Mozzarella</option>
              <option value="mushrooms">Mushrooms</option>
              <option value="pepperoni">Pepperoni</option>
              <option value="onions">Onions</option>
            </select>
          </div>
          <h5><strong>配置选项</strong></h5>
          <table class="table table-bordered">
            <thead>
              <tr>
                <th colspan="3"> 总览 </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><a href="#configuration-options-multiple"><code>multiple</code></a></td>
                <td><a href="#configuration-options-enableHTML"><code>enableHTML</code></a></td>
                <td><a href="#configuration-options-enableClickableOptGroups"><code>enableClickableOptGroups</code></a></td>
              </tr>
              <tr>
                <td><a href="#configuration-options-enableCollapsibleOptGroups"><code>enableCollapsibleOptGroups</code></a></td>
                <td><a href="#configuration-options-collapseOptGroupsByDefault"><code>collapseOptGroupsByDefault</code></a></td>
                <td><a href="#configuration-options-disableIfEmpty"><code>disableIfEmpty</code></a></td>
              </tr>
              <tr>
                <td><a href="#configuration-options-dropRight"><code>dropRight</code></a></td>
                <td><a href="#configuration-options-dropUp"><code>dropUp</code></a></td>
                <td><a href="#configuration-options-maxHeight"><code>maxHeight</code></a></td>
              </tr>
              <tr><td><a href="#configuration-options-disableIfEmpty"><code>disableIfEmpty</code></a></td>
                <td><a href="#configuration-options-disabledText"><code>disabledText</code></a></td>
                <td><a href="#configuration-options-onChange"><code>onChange</code></a></td>
              </tr>
              <tr>
                <td><a href="#configuration-options-onInitialized"><code>onInitialized</code></a></td>
                <td><a href="#configuration-options-onDropdownShow"><code>onDropdownShow</code></a></td>
                <td><a href="#configuration-options-onDropdownHide"><code>onDropdownHide</code></a></td>
              </tr>
              <tr><td><a href="#configuration-options-onDropdownShown"><code>onDropdownShown</code></a></td>
                <td><a href="#configuration-options-onDropdownHidden"><code>onDropdownHidden</code></a></td>
                <td><a href="#configuration-options-buttonClass"><code>buttonClass</code></a></td>
              </tr>
              <tr>
                <td><a href="#configuration-options-inheritClass"><code>inheritClass</code></a></td>
                <td><a href="#configuration-options-buttonContainer"><code>buttonContainer</code></a></td>
                <td><a href="#configuration-options-buttonWidth"><code>buttonWidth</code></a></td>
              </tr>
              <tr>
                <td><a href="#configuration-options-buttonText"><code>buttonText</code></a></td>
                <td><a href="#configuration-options-buttonTitle"><code>buttonTitle</code></a></td>
                <td><a href="#configuration-options-nonSelectedText"><code>nonSelectedText</code></a></td>
              </tr>
              <tr>
                <td><a href="#configuration-options-nSelectedText"><code>nSelectedText</code></a></td>
                <td><a href="#configuration-options-allSelectedText"><code>allSelectedText</code></a></td>
                <td><a href="#configuration-options-numberDisplayed"><code>numberDisplayed</code></a></td>
              </tr>
              <tr><td><a href="#configuration-options-delimiterText"><code>delimiterText</code></a></td>
                <td><a href="#configuration-options-optionLabel"><code>optionLabel</code></a></td>
                <td><a href="#configuration-options-optionClass"><code>optionClass</code></a></td>
              </tr>
              <tr>
                <td><a href="#configuration-options-selectedClass"><code>selectedClass</code></a></td>
                <td><a href="#configuration-options-includeSelectAllOption"><code>includeSelectAllOption</code></a></td>
                <td><a href="#configuration-options-selectAllJustVisible"><code>selectAllJustVisible</code></a></td>
              </tr>
              <tr>
                <td><a href="#configuration-options-selectAllText"><code>selectAllText</code></a></td>
                <td><a href="#configuration-options-selectAllValue"><code>selectAllValue</code></a></td>
                <td><a href="#configuration-options-selectAllName"><code>selectAllName</code></a></td>
              </tr>
              <tr>
                <td><a href="#configuration-options-selectAllNumber"><code>selectAllNumber</code></a></td>
                <td><a href="#configuration-options-onSelectAll"><code>onSelectAll</code></a></td>
                <td><a href="#configuration-options-onDeselectAll"><code>onDeselectAll</code></a></td>
              </tr>
              <tr>
                <td><a href="#configuration-options-enableFiltering"><code>enableFiltering</code></a></td>
                <td><a href="#configuration-options-enableCaseInsensitiveFiltering"><code>enableCaseInsensitiveFiltering</code></a></td>
                <td><a href="#configuration-options-enableFullValueFiltering"><code>enableFullValueFiltering</code></a></td>
              </tr>
              <tr>
                <td><a href="#configuration-options-filterBehavior"><code>filterBehavior</code></a></td>
                <td><a href="#configuration-options-filterPlaceholder"><code>filterPlaceholder</code></a></td>
                <td><a href="#configuration-options-includeResetOption"><code>includeResetOption</code></a></td>
              </tr>
              <tr>
                <td><a href="#configuration-options-includeResetDivider"><code>includeResetDivider</code></a></td>
                <td><a href="#configuration-options-resetText"><code>resetText</code></a></td>
                <td></td>
              </tr>
            </tbody>
          </table>
          <table class="table table-bordered">
            <tbody>
            <tr>
              <td width="30%"><code id="configuration-options-multiple">multiple</code></td>
              <td>
                <p><code>multiple</code> 不是真正的配置选项。它指的是应用插件的 <code>multiple</code>属性<code>select</code>。存在的<code>multiple</code> 属性时 <code>select</code> 插件将使用复选框来允许多个选择。如果不存在，则插件使用单选按钮允许单选。当使用插件进行单选时（不存在<code>multiple</code> 属性），如果事先未选择其他选项，则将自动选择第一个选项。有关如何避免这种行为的信息，请参见 <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/129">#129</a> for how to avoid this behavior. </p>
                <p>以下示例显示了 <code>multiple</code> 省略属性时的默认行为： </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-single">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-single"&gt;
    &lt;option value="1"&gt;Option 1&lt;/option&gt;
    &lt;option value="2"&gt;Option 2&lt;/option&gt;
    &lt;option value="3"&gt;Option 3&lt;/option&gt;
    &lt;option value="4"&gt;Option 4&lt;/option&gt;
    &lt;option value="5"&gt;Option 5&lt;/option&gt;
    &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
                  <pre class="line-numbers"><code class="language-javascript">$('#example-single').multiselect();</code></pre>
                </div>
                <p>如果预先选择了多个选项而<code>select</code> 缺少该<code>multiple</code> 属性，<code>selected</code>则插件将首先选择标记为的最后一个选项。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-single-selected">
                      <option value="1">Option 1</option>
                      <option value="2" selected="selected">Option 2</option>
                      <!-- Option 3 will be selected in advance ... -->
                      <option value="3" selected="selected">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-single-selected"&gt;
    &lt;option value="1"&gt;Option 1&lt;/option&gt;
    &lt;option value="2" selected="selected"&gt;Option 2&lt;/option&gt;
    &lt;!-- Option 3 will be selected in advance ... --&gt;
    &lt;option value="3" selected="selected"&gt;Option 3&lt;/option&gt;
    &lt;option value="4"&gt;Option 4&lt;/option&gt;
    &lt;option value="5"&gt;Option 5&lt;/option&gt;
    &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
                  <pre class="line-numbers"><code class="language-javascript">$('#example-single-selected').multiselect();</code></pre>
                </div>
                <p>以下示例显示了<code>multiple</code> 存在属性时的默认行为。最初选择的选项将自动采用： </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-multiple-selected" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2" selected="selected">Option 2</option>
                      <!-- Option 3 will be selected in advance ... -->
                      <option value="3" selected="selected">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-multiple-selected" multiple="multiple"&gt;
    &lt;option value="1"&gt;Option 1&lt;/option&gt;
    &lt;option value="2" selected="selected"&gt;Option 2&lt;/option&gt;
    &lt;!-- Option 3 will be selected in advance ... --&gt;
    &lt;option value="3" selected="selected"&gt;Option 3&lt;/option&gt;
    &lt;option value="4"&gt;Option 4&lt;/option&gt;
    &lt;option value="5"&gt;Option 5&lt;/option&gt;
    &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
                  <pre class="line-numbers"><code class="language-javascript">$('#example-multiple-selected').multiselect();</code></pre>
                </div>
                <p>该插件自然支持<code>optgroup</code>，但是默认情况下无法点击组标题。有关 <code>enableClickableOptGroups</code> 详细信息，请参见该选项。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-multiple-optgroups">
                      <optgroup label="Group 1">
                        <option value="1-1">Option 1.1</option>
                        <option value="1-2" selected="selected">Option 1.2</option>
                        <option value="1-3" selected="selected">Option 1.3</option>
                      </optgroup>
                      <optgroup label="Group 2">
                        <option value="2-1">Option 2.1</option>
                        <option value="2-2">Option 2.2</option>
                        <option value="2-3">Option 2.3</option>
                      </optgroup>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id=&quot;example-multiple-optgroups&quot;&gt;
    &lt;optgroup label=&quot;Group 1&quot;&gt;
        &lt;option value=&quot;1-1&quot;&gt;Option 1.1&lt;/option&gt;
        &lt;option value=&quot;1-2&quot; selected=&quot;selected&quot;&gt;Option 1.2&lt;/option&gt;
        &lt;option value=&quot;1-3&quot; selected=&quot;selected&quot;&gt;Option 1.3&lt;/option&gt;
    &lt;/optgroup&gt;
    &lt;optgroup label=&quot;Group 2&quot;&gt;
        &lt;option value=&quot;2-1&quot;&gt;Option 2.1&lt;/option&gt;
        &lt;option value=&quot;2-2&quot;&gt;Option 2.2&lt;/option&gt;
        &lt;option value=&quot;2-3&quot;&gt;Option 2.3&lt;/option&gt;
    &lt;/optgroup&gt;
&lt;/select&gt;
</code></pre>
                  
                  <pre class="line-numbers"><code class="language-javascript">$('#example-multiple-optgroups').multiselect();</code></pre>
                </div>
                <p>请注意，采用的类 <code>optgroup</code>，可以轻松选择单个<code>optgroup</code>（检查创建的标记以注意区别！）： </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-multiple-optgroups-classes" multiple="multiple">
                      <optgroup label="Group 1" class="group-1">
                        <option value="1-1">Option 1.1</option>
                        <option value="1-2" selected="selected">Option 1.2</option>
                        <option value="1-3" selected="selected">Option 1.3</option>
                      </optgroup>
                      <optgroup label="Group 2" class="group-2">
                        <option value="2-1">Option 2.1</option>
                        <option value="2-2">Option 2.2</option>
                        <option value="2-3">Option 2.3</option>
                      </optgroup>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id=&quot;example-multiple-optgroups-classes&quot; multiple=&quot;multiple&quot;&gt;
    &lt;optgroup label=&quot;Group 1&quot; class=&quot;group-1&quot;&gt;
        &lt;option value=&quot;1-1&quot;&gt;Option 1.1&lt;/option&gt;
        &lt;option value=&quot;1-2&quot; selected=&quot;selected&quot;&gt;Option 1.2&lt;/option&gt;
        &lt;option value=&quot;1-3&quot; selected=&quot;selected&quot;&gt;Option 1.3&lt;/option&gt;
    &lt;/optgroup&gt;
    &lt;optgroup label=&quot;Group 2&quot; class=&quot;group-2&quot;&gt;
        &lt;option value=&quot;2-1&quot;&gt;Option 2.1&lt;/option&gt;
        &lt;option value=&quot;2-2&quot;&gt;Option 2.2&lt;/option&gt;
        &lt;option value=&quot;2-3&quot;&gt;Option 2.3&lt;/option&gt;
    &lt;/optgroup&gt;
&lt;/select&gt;
</code></pre>
                  
                  <pre class="line-numbers"><code class="language-javascript">$('#example-multiple-optgroups-classes').multiselect();</code></pre>
                </div>
                
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-enableHTML">enableHTML</code></td>
              <td>
                <p>XSS注入对所有现代Web应用程序都是严重的威胁。设置<code>enableHTML</code> 为 <code>false</code>（默认设置）将创建XSS安全多选。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-xss" multiple="multiple">
                      <option value="1">&lt;script&gt;alert(1);&lt;/script&gt;</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-xss" multiple="multiple"&gt;
    &lt;option value="1"&gt;&amp;lt;script&amp;gt;alert(1);&amp;lt;/script&amp;gt;&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
                  <pre class="line-numbers"><code class="language-javascript">$('#example-xss').multiselect();</code></pre>
                </div>
                <p>在另一方面，当设置<code>enableHTML</code> 到 <code>true</code>，该插件将在支持HTML<code>option</code>s:</p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-xss-html" multiple="multiple">
                      <option value="1">&lt;span style=&quot;color:red&quot;&gt;Option 1&lt;/span&gt;</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-xss-html" multiple="multiple"&gt;
    &lt;option value="1"&gt;&amp;gt;span style="color:red"&amp;lt;Option 1&amp;gt;/span&amp;gt;&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-xss-html').multiselect({
    nonSelectedText:'&lt;span style=&quot;color:red&quot;&gt;Option 1&lt;/span&gt;',
    enableHTML:true
});</code></pre>
                </div>
                
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-enableClickableOptGroups">enableClickableOptGroups</code></td>
              <td>
                <p>如果设置为 <code>true</code>, <code>optgroup</code>则可以单击，从而可以轻松选择属于同一组的多个选项。 </p>
                <p class="alert alert-warning"><code>enableClickableOptGroups</code> 在单选模式下（即当 <code>multiple</code>属性不存在时）不可用。 </p>
                <p class="alert alert-info"> 使用时 <code>selectedClass</code>，所选类别也将应用于选项组。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-enableClickableOptGroups" multiple="multiple">
                      <optgroup label="Group 1"><option value="1-1">Option 1.1</option>
                        <option value="1-2" selected="selected">Option 1.2</option>
                        <option value="1-3" selected="selected">Option 1.3</option>
                      </optgroup>
                      <optgroup label="Group 2">
                        <option value="2-1">Option 2.1</option>
                        <option value="2-2">Option 2.2</option>
                        <option value="2-3">Option 2.3</option>
                      </optgroup>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-enableClickableOptGroups" multiple="multiple"&gt;
  &lt;optgroup label="Group 1"&gt;&lt;option value="1-1"&gt;Option 1.1&lt;/option&gt;
    &lt;option value="1-2" selected="selected"&gt;Option 1.2&lt;/option&gt;
    &lt;option value="1-3" selected="selected"&gt;Option 1.3&lt;/option&gt;
  &lt;/optgroup&gt;
  &lt;optgroup label="Group 2"&gt;
    &lt;option value="2-1"&gt;Option 2.1&lt;/option&gt;
    &lt;option value="2-2"&gt;Option 2.2&lt;/option&gt;
    &lt;option value="2-3"&gt;Option 2.3&lt;/option&gt;
  &lt;/optgroup&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-enableClickableOptGroups').multiselect({
    enableClickableOptGroups: true
});
</code></pre>
                </div>
                <p>请注意，此选项还可以与禁用的选项一起使用： </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-enableClickableOptGroups-disabled" multiple="multiple">
                      <optgroup label="Group 1"><option value="1-1" disabled>Option 1.1</option>
                        <option value="1-2" selected="selected">Option 1.2</option>
                        <option value="1-3" selected="selected">Option 1.3</option>
                      </optgroup>
                      <optgroup label="Group 2">
                        <option value="2-1" disabled>Option 2.1</option>
                        <option value="2-2">Option 2.2</option>
                        <option value="2-3">Option 2.3</option>
                      </optgroup>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-enableClickableOptGroups-disabled" multiple="multiple"&gt;
  &lt;optgroup label="Group 1"&gt;&lt;option value="1-1" disabled&gt;Option 1.1&lt;/option&gt;
    &lt;option value="1-2" selected="selected"&gt;Option 1.2&lt;/option&gt;
    &lt;option value="1-3" selected="selected"&gt;Option 1.3&lt;/option&gt;
  &lt;/optgroup&gt;
  &lt;optgroup label="Group 2"&gt;
    &lt;option value="2-1" disabled&gt;Option 2.1&lt;/option&gt;
    &lt;option value="2-2"&gt;Option 2.2&lt;/option&gt;
    &lt;option value="2-3"&gt;Option 2.3&lt;/option&gt;
  &lt;/optgroup&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-enableClickableOptGroups-disabled').multiselect({
    enableClickableOptGroups: true
});
</code></pre>
                </div>
                <p>注意行为的<code>onChange</code>变化。每当更改/单击optgroup时，<code>onChange</code>都会使用所有受影响的选项作为第一个参数来触发事件。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-enableClickableOptGroups-onChange" multiple="multiple">
                      <optgroup label="Group 1"><option value="1-1">Option 1.1</option>
                        <option value="1-2" selected="selected">Option 1.2</option>
                        <option value="1-3" selected="selected">Option 1.3</option>
                      </optgroup>
                      <optgroup label="Group 2">
                        <option value="2-1">Option 2.1</option>
                        <option value="2-2">Option 2.2</option>
                        <option value="2-3">Option 2.3</option>
                      </optgroup>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-enableClickableOptGroups-onChange" multiple="multiple"&gt;
  &lt;optgroup label="Group 1"&gt;&lt;option value="1-1"&gt;Option 1.1&lt;/option&gt;
    &lt;option value="1-2" selected="selected"&gt;Option 1.2&lt;/option&gt;
    &lt;option value="1-3" selected="selected"&gt;Option 1.3&lt;/option&gt;
  &lt;/optgroup&gt;
  &lt;optgroup label="Group 2"&gt;
    &lt;option value="2-1"&gt;Option 2.1&lt;/option&gt;
    &lt;option value="2-2"&gt;Option 2.2&lt;/option&gt;
    &lt;option value="2-3"&gt;Option 2.3&lt;/option&gt;
  &lt;/optgroup&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-enableClickableOptGroups-onChange').multiselect({
     enableClickableOptGroups: true,
     onChange: function(option, checked) {
         alert(option.length + ' options ' + (checked ? 'selected' : 'deselected'));
     }
 });
</code></pre>
                </div>
                <p>请注意，<code>optgroup</code>如果默认情况下选择了整个组，则会自动选择。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-enableClickableOptGroups-init" multiple="multiple">
                      <optgroup label="Group 1">
                        <option value="1-1" disabled="disabled">Option 1.1</option>
                        <option value="1-2" selected="selected">Option 1.2</option>
                        <option value="1-3" selected="selected">Option 1.3</option>
                      </optgroup>
                      <optgroup label="Group 2">
                        <option value="2-1">Option 2.1</option>
                        <option value="2-2">Option 2.2</option>
                        <option value="2-3">Option 2.3</option>
                      </optgroup>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-enableClickableOptGroups-init" multiple="multiple"&gt;
  &lt;optgroup label="Group 1"&gt;
    &lt;option value="1-1" disabled="disabled"&gt;Option 1.1&lt;/option&gt;
    &lt;option value="1-2" selected="selected"&gt;Option 1.2&lt;/option&gt;
    &lt;option value="1-3" selected="selected"&gt;Option 1.3&lt;/option&gt;
  &lt;/optgroup&gt;
  &lt;optgroup label="Group 2"&gt;
    &lt;option value="2-1"&gt;Option 2.1&lt;/option&gt;
    &lt;option value="2-2"&gt;Option 2.2&lt;/option&gt;
    &lt;option value="2-3"&gt;Option 2.3&lt;/option&gt;
  &lt;/optgroup&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-enableClickableOptGroups-init').multiselect({
    enableClickableOptGroups: true
});
</code></pre>
                </div>
                
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-enableCollapsibleOptGroups">enableCollapsibleOptGroups</code></td>
              <td>
                <p>如果设置为<code>true</code>, <code>optgroup</code>则可折叠。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-enableCollapsibleOptGroups" multiple="multiple">
                      <optgroup label="Group 1">
                        <option value="1-1" disabled>Option 1.1</option>
                        <option value="1-2" selected="selected">Option 1.2</option>
                        <option value="1-3" selected="selected">Option 1.3</option>
                      </optgroup>
                      <optgroup label="Group 2">
                        <option value="2-1">Option 2.1</option>
                        <option value="2-2">Option 2.2</option>
                        <option value="2-3">Option 2.3</option>
                      </optgroup>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-enableCollapsibleOptGroups" multiple="multiple"&gt;
  &lt;optgroup label="Group 1"&gt;
    &lt;option value="1-1" disabled&gt;Option 1.1&lt;/option&gt;
    &lt;option value="1-2" selected="selected"&gt;Option 1.2&lt;/option&gt;
    &lt;option value="1-3" selected="selected"&gt;Option 1.3&lt;/option&gt;
  &lt;/optgroup&gt;
  &lt;optgroup label="Group 2"&gt;
    &lt;option value="2-1"&gt;Option 2.1&lt;/option&gt;
    &lt;option value="2-2"&gt;Option 2.2&lt;/option&gt;
    &lt;option value="2-3"&gt;Option 2.3&lt;/option&gt;
  &lt;/optgroup&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-enableCollapsibleOptGroups').multiselect({
    enableCollapsibleOptGroups: true
});
</code></pre>
                </div>
                <p>这两种选择，<code>enableCollapsibleOptGroups</code> 并且 <code>enableClickableOptGroups</code>，也可以结合： </p><p class="alert alert-warning"> 但是请注意，将两个选项组合在一起的行为可能与预期不符-请尝试以下示例，以获取一些直觉。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-enableCollapsibleOptGroups-enableClickableOptGroups" multiple="multiple">
                      <optgroup label="Group 1">
                        <option value="1-1" disabled>Option 1.1</option>
                        <option value="1-2" selected="selected">Option 1.2</option>
                        <option value="1-3" selected="selected">Option 1.3</option>
                      </optgroup>
                      <optgroup label="Group 2">
                        <option value="2-1">Option 2.1</option>
                        <option value="2-2">Option 2.2</option>
                        <option value="2-3">Option 2.3</option>
                      </optgroup>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-enableCollapsibleOptGroups-enableClickableOptGroups" multiple="multiple"&gt;
  &lt;optgroup label="Group 1"&gt;
    &lt;option value="1-1" disabled&gt;Option 1.1&lt;/option&gt;
    &lt;option value="1-2" selected="selected"&gt;Option 1.2&lt;/option&gt;
    &lt;option value="1-3" selected="selected"&gt;Option 1.3&lt;/option&gt;
  &lt;/optgroup&gt;
  &lt;optgroup label="Group 2"&gt;
    &lt;option value="2-1"&gt;Option 2.1&lt;/option&gt;
    &lt;option value="2-2"&gt;Option 2.2&lt;/option&gt;
    &lt;option value="2-3"&gt;Option 2.3&lt;/option&gt;
  &lt;/optgroup&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-enableCollapsibleOptGroups-enableClickableOptGroups').multiselect({
    enableClickableOptGroups: true,
    enableCollapsibleOptGroups: true
});
</code></pre>
                </div>
                <p>可以使用以下简单技巧在默认情况下折叠组： </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-enableCollapsibleOptGroups-collapsed" multiple="multiple">
                      <optgroup label="Group 1">
                        <option value="1-1" disabled>Option 1.1</option>
                        <option value="1-2" selected="selected">Option 1.2</option>
                        <option value="1-3" selected="selected">Option 1.3</option>
                      </optgroup>
                      <optgroup label="Group 2">
                        <option value="2-1">Option 2.1</option>
                        <option value="2-2">Option 2.2</option>
                        <option value="2-3">Option 2.3</option>
                      </optgroup>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-enableCollapsibleOptGroups-collapsed" multiple="multiple"&gt;
  &lt;optgroup label="Group 1"&gt;
    &lt;option value="1-1" disabled&gt;Option 1.1&lt;/option&gt;
    &lt;option value="1-2" selected="selected"&gt;Option 1.2&lt;/option&gt;
    &lt;option value="1-3" selected="selected"&gt;Option 1.3&lt;/option&gt;
  &lt;/optgroup&gt;
  &lt;optgroup label="Group 2"&gt;
    &lt;option value="2-1"&gt;Option 2.1&lt;/option&gt;
    &lt;option value="2-2"&gt;Option 2.2&lt;/option&gt;
    &lt;option value="2-3"&gt;Option 2.3&lt;/option&gt;
  &lt;/optgroup&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-enableCollapsibleOptGroups-collapsed').multiselect({
    enableCollapsibleOptGroups: true,
    buttonContainer: '&lt;div id=&quot;example-enableCollapsibleOptGroups-collapsed-container&quot; class=&quot;btn-group&quot; /&gt;'
});
$('#example-enableCollapsibleOptGroups-collapsed-container .caret-container').click();
</code></pre>
                </div>
                <p>将以上与<code>enableFiltering</code> 和结合 <code>includeSelectAllOption</code>: </p>
                <p class="alert alert-warning"> 此外，请注意，该行为相结合 <code>enableCollapsibleOptGroups</code>, <code>enableCollapsibleOptGroups</code>, <code>enableFiltering</code> and <code>includeSelectAllOption</code> 不是彻底的测试。尝试以下示例以获得一些直觉。</p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-enableCollapsibleOptGroups-enableClickableOptGroups-enableFiltering-includeSelectAllOption" multiple="multiple">
                      <optgroup label="Group 1">
                        <option value="1-1" disabled>Option 1.1</option>
                        <option value="1-2" selected="selected">Option 1.2</option>
                        <option value="1-3" selected="selected">Option 1.3</option>
                      </optgroup>
                      <optgroup label="Group 2">
                        <option value="2-1">Option 2.1</option>
                        <option value="2-2">Option 2.2</option>
                        <option value="2-3">Option 2.3</option>
                      </optgroup>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-enableCollapsibleOptGroups-enableClickableOptGroups-enableFiltering-includeSelectAllOption" multiple="multiple"&gt;
  &lt;optgroup label="Group 1"&gt;
    &lt;option value="1-1" disabled&gt;Option 1.1&lt;/option&gt;
    &lt;option value="1-2" selected="selected"&gt;Option 1.2&lt;/option&gt;
    &lt;option value="1-3" selected="selected"&gt;Option 1.3&lt;/option&gt;
  &lt;/optgroup&gt;
  &lt;optgroup label="Group 2"&gt;
    &lt;option value="2-1"&gt;Option 2.1&lt;/option&gt;
    &lt;option value="2-2"&gt;Option 2.2&lt;/option&gt;
    &lt;option value="2-3"&gt;Option 2.3&lt;/option&gt;
  &lt;/optgroup&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-enableCollapsibleOptGroups-enableClickableOptGroups-enableFiltering-includeSelectAllOption').multiselect({
    enableClickableOptGroups: true,
    enableCollapsibleOptGroups: true,
    enableFiltering: true,
    includeSelectAllOption: true
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-collapseOptGroupsByDefault">collapseOptGroupsByDefault</code></td>
              <td>
                <p><code>optgroup</code>默认情况下，此选项将折叠所有。</p><p class="alert alert-info"><a href="#further-examples">“ 其他示例”</a> 部分中还有一个示例，说明<code>optgroups</code> 默认情况下的另一种折叠方式。</p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-collapseOptGroupsByDefault" multiple="multiple">
                      <optgroup label="Group 1">
                        <option value="1-1" disabled>Option 1.1</option>
                        <option value="1-2" selected="selected">Option 1.2</option>
                        <option value="1-3" selected="selected">Option 1.3</option></optgroup>
                      <optgroup label="Group 2">
                        <option value="2-1">Option 2.1</option>
                        <option value="2-2">Option 2.2</option>
                        <option value="2-3">Option 2.3</option></optgroup>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-collapseOptGroupsByDefault" multiple="multiple"&gt;
  &lt;optgroup label="Group 1"&gt;
    &lt;option value="1-1" disabled&gt;Option 1.1&lt;/option&gt;
    &lt;option value="1-2" selected="selected"&gt;Option 1.2&lt;/option&gt;
    &lt;option value="1-3" selected="selected"&gt;Option 1.3&lt;/option&gt;&lt;/optgroup&gt;
  &lt;optgroup label="Group 2"&gt;
    &lt;option value="2-1"&gt;Option 2.1&lt;/option&gt;
    &lt;option value="2-2"&gt;Option 2.2&lt;/option&gt;
    &lt;option value="2-3"&gt;Option 2.3&lt;/option&gt;&lt;/optgroup&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-collapseOptGroupsByDefault').multiselect({
    enableCollapsibleOptGroups: true,
    collapseOptGroupsByDefault: true
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-disableIfEmpty">disableIfEmpty</code></td>
              <td>
                <p>如果设置为<code>true</code>，则在未提供任何选项的情况下将禁用多选。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-disableIfEmpty" multiple="multiple"></select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-disableIfEmpty" multiple="multiple"&gt;&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-disableIfEmpty').multiselect({
    disableIfEmpty: true
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-disabledText">disabledText</code></td>
              <td>
                <p>如果禁用多选，则会显示该文本。请注意，<code>''</code>默认情况下此选项设置为空字符串，<code>nonSelectedText</code> 如果禁用了multiselect并且未选择任何选项，则会显示该选项。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-disabledText" multiple="multiple"></select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-disabledText" multiple="multiple"&gt;&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-disabledText').multiselect({
    disableIfEmpty: true,
    disabledText: 'Disabled ...'
});
</code></pre>
                </div>
                <p><code>disabledText</code> 当 <code>select</code> 禁用基础时， 该选项也起作用： </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-disabledText-disabled" multiple="multiple" disabled="disabled">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id=&quot;example-disabledText-disabled&quot; multiple=&quot;multiple&quot; disabled=&quot;disabled&quot;&gt;
    &lt;option value=&quot;1&quot;&gt;Option 1&lt;/option&gt;
    &lt;option value=&quot;2&quot;&gt;Option 2&lt;/option&gt;
    &lt;option value=&quot;3&quot;&gt;Option 3&lt;/option&gt;
    &lt;option value=&quot;4&quot;&gt;Option 4&lt;/option&gt;
    &lt;option value=&quot;5&quot;&gt;Option 5&lt;/option&gt;
    &lt;option value=&quot;6&quot;&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-disabledText-disabled').multiselect({
    disabledText: 'Disabled ...'
});
</code></pre>
                </div>
                <p>请注意，所选选项仍将显示： </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-disabledText-disabled-selected" multiple="multiple" disabled="disabled">
                      <option value="1">Option 1</option>
                      <option value="2" selected="selected">Option 2</option>
                      <option value="3" selected="selected">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">
&lt;select id=&quot;example-disabledText-disabled-selected&quot; multiple=&quot;multiple&quot; disabled=&quot;disabled&quot;&gt;
    &lt;option value=&quot;1&quot;&gt;Option 1&lt;/option&gt;
    &lt;option value=&quot;2&quot; selected=&quot;selected&quot;&gt;Option 2&lt;/option&gt;
    &lt;option value=&quot;3&quot; selected=&quot;selected&quot;&gt;Option 3&lt;/option&gt;
    &lt;option value=&quot;4&quot;&gt;Option 4&lt;/option&gt;
    &lt;option value=&quot;5&quot;&gt;Option 5&lt;/option&gt;
    &lt;option value=&quot;6&quot;&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-disabledText-disabled-selected').multiselect({
    disabledText: 'Disabled ...'
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-dropRight">dropRight</code></td>
              <td>
                <p>下拉菜单也可以正确删除。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-dropRight" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-dropRight" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-dropRight').multiselect({
    buttonWidth: '400px',
    dropRight: true
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-dropUp">dropUp</code></td>
              <td>
                <p>下拉菜单也可以删除。请注意，建议同时设置<code>maxHeight</code>。插件会计算下拉菜单的必要高度，并采用计算值和的最小值<code>maxHeight</code>. </p>
                <p class="alert alert-warning"> 请注意，此功能已在<a href="https://github.com/davidstutz/bootstrap-multiselect/issues/594">#594</a>引入，并且已知因环境而异。 </p><p class="alert alert-info"><code>dropUp</code> 在 <a href="#further-examples">“ 更多示例”</a>中可以找到在滚动时 自动添加选项的示例。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-dropUp" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option data-role="divider"></option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id=&quot;example-dropUp&quot; multiple=&quot;multiple&quot;&gt;
    &lt;option value=&quot;1&quot;&gt;Option 1&lt;/option&gt;
    &lt;option value=&quot;2&quot;&gt;Option 2&lt;/option&gt;
    &lt;option value=&quot;3&quot;&gt;Option 3&lt;/option&gt;
    &lt;option data-role=&quot;divider&quot;&gt;&lt;/option&gt;
    &lt;option value=&quot;4&quot;&gt;Option 4&lt;/option&gt;
    &lt;option value=&quot;5&quot;&gt;Option 5&lt;/option&gt;
    &lt;option value=&quot;6&quot;&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-dropUp').multiselect({
    enableFiltering: true,
    includeSelectAllOption: true,
    maxHeight: 400,
    dropUp: true
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-maxHeight">maxHeight</code></td>
              <td>
                <p>下拉菜单的最大高度。当使用带有很多选项的插件时，这很有用。 </p>
                <p>左侧的多选使用<code>maxHeight</code> 设置为 <code>200</code>。另一方面，右侧的多重选择不使用<code>maxHeight</code>. </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-with-maxHeight" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                      <option value="7">Option 7</option>
                      <option value="9">Option 8</option>
                      <option value="9">Option 9</option>
                      <option value="10">Option 10</option>
                      <option value="11">Option 11</option>
                      <option value="12">Option 12</option>
                      <option value="13">Option 13</option>
                      <option value="14">Option 14</option>
                      <option value="15">Option 15</option>
                      <option value="16">Option 16</option>
                      <option value="17">Option 17</option>
                      <option value="18">Option 18</option>
                      <option value="19">Option 19</option>
                      <option value="20">Option 20</option>
                    </select>
                    <select id="example-without-maxHeight" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                      <option value="7">Option 7</option>
                      <option value="9">Option 8</option>
                      <option value="9">Option 9</option>
                      <option value="10">Option 10</option>
                      <option value="11">Option 11</option>
                      <option value="12">Option 12</option>
                      <option value="13">Option 13</option>
                      <option value="14">Option 14</option>
                      <option value="15">Option 15</option>
                      <option value="16">Option 16</option>
                      <option value="17">Option 17</option>
                      <option value="18">Option 18</option>
                      <option value="19">Option 19</option>
                      <option value="20">Option 20</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-with-maxHeight" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
  &lt;option value="7"&gt;Option 7&lt;/option&gt;
  &lt;option value="9"&gt;Option 8&lt;/option&gt;
  &lt;option value="9"&gt;Option 9&lt;/option&gt;
  &lt;option value="10"&gt;Option 10&lt;/option&gt;
  &lt;option value="11"&gt;Option 11&lt;/option&gt;
  &lt;option value="12"&gt;Option 12&lt;/option&gt;
  &lt;option value="13"&gt;Option 13&lt;/option&gt;
  &lt;option value="14"&gt;Option 14&lt;/option&gt;
  &lt;option value="15"&gt;Option 15&lt;/option&gt;
  &lt;option value="16"&gt;Option 16&lt;/option&gt;
  &lt;option value="17"&gt;Option 17&lt;/option&gt;
  &lt;option value="18"&gt;Option 18&lt;/option&gt;
  &lt;option value="19"&gt;Option 19&lt;/option&gt;
  &lt;option value="20"&gt;Option 20&lt;/option&gt;
&lt;/select&gt;
&lt;select id="example-without-maxHeight" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
  &lt;option value="7"&gt;Option 7&lt;/option&gt;
  &lt;option value="9"&gt;Option 8&lt;/option&gt;
  &lt;option value="9"&gt;Option 9&lt;/option&gt;
  &lt;option value="10"&gt;Option 10&lt;/option&gt;
  &lt;option value="11"&gt;Option 11&lt;/option&gt;
  &lt;option value="12"&gt;Option 12&lt;/option&gt;
  &lt;option value="13"&gt;Option 13&lt;/option&gt;
  &lt;option value="14"&gt;Option 14&lt;/option&gt;
  &lt;option value="15"&gt;Option 15&lt;/option&gt;
  &lt;option value="16"&gt;Option 16&lt;/option&gt;
  &lt;option value="17"&gt;Option 17&lt;/option&gt;
  &lt;option value="18"&gt;Option 18&lt;/option&gt;
  &lt;option value="19"&gt;Option 19&lt;/option&gt;
  &lt;option value="20"&gt;Option 20&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-with-maxHeight').multiselect({
    maxHeight: 200
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-checkboxName">checkboxName</code></td>
              <td>
                <p>用于生成的复选框的名称。有关详细信息，请参见<a href="#post">服务器端处理。</a></p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-checkboxName" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-checkboxName" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-checkboxName').multiselect({
    checkboxName: function(option) {
        return 'multiselect[]';
    }
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-onChange">onChange</code></td>
              <td>
                <p>在选项的更改事件上触发的功能。请注意，使用插件提供的<code>select</code> and <code>deselect</code> 方法选择或取消选择选项时，不会触发事件。 </p>
                <p class="alert alert-warning"> 需要注意的是行为<code>onChange</code>改变设置时 <code>enableClickableOptGroups</code> 要 <code>true</code>. </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-onChange" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-onChange" multiple="multiple"&lt;
  &lt;option value="1"&lt;Option 1&lt;/option&lt;
  &lt;option value="2"&lt;Option 2&lt;/option&lt;
  &lt;option value="3"&lt;Option 3&lt;/option&lt;
  &lt;option value="4"&lt;Option 4&lt;/option&lt;
  &lt;option value="5"&lt;Option 5&lt;/option&lt;
  &lt;option value="6"&lt;Option 6&lt;/option&lt;
&lt;/select&lt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-onChange').multiselect({
    onChange: function(option, checked, select) {
        alert('Changed option ' + $(option).val() + '.');
    }
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-onInitialized">onInitialized</code></td>
              <td>
                <p>当多选完成初始化时触发的功能。</p>
                <div class="code-window">
                  <div class="code-preview">
                    <div class="btn-group">
                      <button id="example-onInitialized-button" class="btn btn-primary">Activate!</button>
                      <select id="example-onInitialized" multiple="multiple">
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                        <option value="3">Option 3</option>
                        <option value="4">Option 4</option>
                        <option value="5">Option 5</option>
                        <option value="6">Option 6</option>
                      </select>
                    </div>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;div class=&quot;btn-group&quot;&gt;
    &lt;button id=&quot;example-onInitialized-button&quot; class=&quot;btn btn-primary&quot;&gt;Activate!&lt;/button&gt;
    &lt;select id=&quot;example-onInitialized&quot; multiple=&quot;multiple&quot;&gt;
        &lt;option value=&quot;1&quot;&gt;Option 1&lt;/option&gt;
        &lt;option value=&quot;2&quot;&gt;Option 2&lt;/option&gt;
        &lt;option value=&quot;3&quot;&gt;Option 3&lt;/option&gt;
        &lt;option value=&quot;4&quot;&gt;Option 4&lt;/option&gt;
        &lt;option value=&quot;5&quot;&gt;Option 5&lt;/option&gt;
        &lt;option value=&quot;6&quot;&gt;Option 6&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-onInitialized-button').on('click', function() {
    $('#example-onInitialized').multiselect({
        onInitialized: function(select, container) {
            alert('Initialized.');
        }
    });
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-onDropdownShow">onDropdownShow</code></td>
              <td>
                <p>显示下拉菜单时调用的回调。</p>
                <p class="alert alert-warning"><code>onDropdownShow</code> 使用Twitter Bootstrap 2.3时， 该选项不可用。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-onDropdownShow" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-onDropdownShow" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-onDropdownShow').multiselect({
    onDropdownShow: function(event) {
        alert('Dropdown shown.');
    }
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-onDropdownHide">onDropdownHide</code></td>
              <td>
                <p>关闭下拉列表时调用的回调。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-onDropdownHide" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-onDropdownHide" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-onDropdownHide').multiselect({
    onDropdownHide: function(event) {
        alert('Dropdown closed.');
    }
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-onDropdownShown">onDropdownShown</code></td>
              <td>
                <p>显示下拉列表后 调用的回调。</p>
                <p class="alert alert-warning"> The <code>onDropdownShown</code> wn使用Twitter Bootstrap 2.3时， 该选项不可用。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-onDropdownShown" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-onDropdownShown" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-onDropdownShown').multiselect({
    onDropdownShown: function(event) {
        alert('Dropdown closed.');
    }
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-onDropdownHidden">onDropdownHidden</code></td>
              <td>
                <p>下拉菜单关闭后 调用的回调。 </p>
                <p class="alert alert-warning"><code>onDropdownHidden</code> 下拉菜单关闭后 调用的回调。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-onDropdownHidden" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-onDropdownHidden" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-ondropdownHidden').multiselect({
    onDropdownHidden: function(event) {
        alert('Dropdown closed.');
    }
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-buttonClass">buttonClass</code></td>
              <td>
                <p>多选按钮的类别。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-buttonClass" multiple="multiple">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
  <option value="6">Option 6</option>
</select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-buttonClass" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-buttonClass').multiselect({
    buttonClass: 'btn btn-link'
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-inheritClass">inheritClass</code></td>
              <td>
                <p>从原始选择继承按钮的类。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-inheritButton" class="btn-primary" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-inheritButton" class="btn-primary" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-inheritButton').multiselect({
    inheritClass: true
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-buttonContainer">buttonContainer</code></td>
              <td>
                <p>包含按钮和下拉菜单的容器。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-buttonContainer" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-buttonContainer" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-buttonContainer').multiselect({
    buttonContainer: '&lt;div class=&quot;btn-group&quot; /&gt;'
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-buttonWidth">buttonWidth</code></td>
              <td>
                <p>使用此选项可以固定多选按钮的宽度。 </p>
                <p class="alert alert-info">实际上， <code>buttonWidth</code> 描述 <code>.btn-group</code>容器的宽度并将的宽度<code>button</code> 设置为<code>100%</code>. </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-buttonWidth" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-buttonWidth" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-buttonWidth').multiselect({
    buttonWidth: '400px'
});
</code></pre>
                </div>
                <p>请注意，如果按钮标题中的文本太长，则会被截断并使用省略号</p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-buttonWidth-overflow" multiple="multiple">
                      <option value="1" selected>Option 1</option>
                      <option value="2" selected>Option 2</option>
                      <option value="3" selected>Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-buttonWidth-overflow" multiple="multiple"&gt;
  &lt;option value="1" selected&gt;Option 1&lt;/option&gt;
  &lt;option value="2" selected&gt;Option 2&lt;/option&gt;
  &lt;option value="3" selected&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-buttonWidth-overflow').multiselect({
    buttonWidth: '150px'
});
</code></pre>
                </div>
                <p>这对于长选项也适用： </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-buttonWidth-overflow-option" multiple="multiple">
                      <option value="1" selected>Long Long Long Option 1</option>
                      <option value="2">Very Very Long Option 2</option>
                      <option value="3">Even Longer Option 3</option>
                      <option value="4">Ridiculous Long Option 4</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-buttonWidth-overflow-option" multiple="multiple"&gt;
  &lt;option value="1" selected&gt;Long Long Long Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Very Very Long Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Even Longer Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Ridiculous Long Option 4&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-buttonWidth-overflow').multiselect({
    buttonWidth: '150px'
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-buttonText">buttonText</code></td>
              <td>
                <p>一个回调，用于指定按钮上显示的文本，具体取决于当前选择的选项。 </p>
                <p>回调获取当前选定的<code>options</code> 和 <code>select</code> 参数，并返回显示为按钮文本的字符串。如果未选择任何选项，则<code>buttonText</code> 返回默认回调<code>nonSelectedText</code>，如果选择的选项 <code>nSelectedText</code> 多于 <code>numberDisplayed</code> 则返回默认回调，如果选择的选项少于<code>numberDisplayed</code> 选项，则返回所选选项的名称。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-buttonText" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-buttonText" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-buttonText').multiselect({
    buttonText: function(options, select) {
        if (options.length === 0) {
            return 'No option selected ...';
        }
        else if (options.length > 3) {
            return 'More than 3 options selected!';
        }
         else {
             var labels = [];
             options.each(function() {
                 if ($(this).attr('label') !== undefined) {
                     labels.push($(this).attr('label'));
                 }
                 else {
                     labels.push($(this).html());
                 }
             });
             return labels.join(', ') + '';
         }
    }
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-buttonTitle">buttonTitle</code></td>
              <td>
                <p>指定按钮标题的回调。 </p>
                <p>回调获取当前选定的<code>options</code>和 <code>select</code>参数，并以字符串形式返回按钮的标题。如果没有选择任何选项，并且选择的选项名称少于options，则<code>buttonTitle</code> 返回默认回调。如果选择了多个选项，则返回。 <code>nonSelectedText</code><code>numberDisplayed</code><code>numberDisplayed</code><code>nSelectedText</code></p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-buttonTitle" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-buttonTitle" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-buttonTitle').multiselect({
    buttonText: function(options, select) {
        return 'Check the title!';
    },
    buttonTitle: function(options, select) {
        var labels = [];
        options.each(function () {
            labels.push($(this).text());
        });
        return labels.join(' - ');
    }
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-nonSelectedText">nonSelectedText</code></td>
              <td>
                <p>未选择任何选项时显示的文本。此选项在默认值<code>buttonText</code> 和 <code>buttonTitle</code> 功能中使用。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-nonSelectedText" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-nonSelectedText" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-nonSelectedText').multiselect({
    nonSelectedText: 'Check an option!'
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-nSelectedText">nSelectedText</code></td>
              <td>
                <p>如果 <code>numberDisplayed</code> 选择了多个选项，则显示的文本。默认 <code>buttonText</code> 和<code>buttonTitle</code>回调使用此选项。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-nSelectedText" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-nSelectedText" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-nSelectedText').multiselect({
    nSelectedText: ' - Too many options selected!'
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-allSelectedText">allSelectedText</code></td>
              <td>
                <p><code>allSelectedText</code> 是如果选择所有选项则显示的文本。您可以<code>allSelectedText</code> 通过将其设置为false 来禁用显示。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-allSelectedText" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-allSelectedText" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-allSelectedText').multiselect({
    allSelectedText: 'No option left ...'
});
</code></pre>
                </div>
                <p>结合使用以下选项，此选项可能很有用 <code>includeSelectAllOption</code>: </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-allSelectedText-includeSelectAllOption" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-allSelectedText-includeSelectAllOption" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-allSelectedText-includeSelectAllOption').multiselect({
    includeSelectAllOption: true,
    allSelectedText: 'No option left ...'
});
</code></pre>
                </div>
                <p>请注意，<code>allSelectedText</code> 如果只有一个选项可用，则不会显示。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-allSelectedText-allSelectedText-single" multiple="multiple">
                      <option value="1">Option 1</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-allSelectedText-allSelectedText-single" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-allSelectedText-allSelectedText-single').multiselect({
    includeSelectAllOption: true,
    allSelectedText: 'No option left ...'
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-numberDisplayed">numberDisplayed</code></td>
              <td>
                <p><code>buttonText</code> 和<code>buttonTitle</code> 功能 使用此选项来确定是否显示太多选项。 </p>
                <p class="alert alert-info">可以通过设置<code>numberDisplayed</code> 为禁用该功能 <code>0</code>.</p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-numberDisplayed" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-numberDisplayed" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-numberDisplayed').multiselect({
    numberDisplayed: 1
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-delimiterText">delimiterText</code></td>
              <td>
                <p>设置鼠标悬停的所选项目列表的分隔符。默认为'，'。设置为“ \ n”以显示整洁。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-delimiterText" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2" selected="selected">Option 2</option>
                      <option value="3" selected="selected">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-delimiterText" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2" selected="selected"&gt;Option 2&lt;/option&gt;
  &lt;option value="3" selected="selected"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-delimiterText').multiselect({
    delimiterText: '; '
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-optionLabel">optionLabel</code></td>
              <td>
                <p>用于定义选项标签的回调。</p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-optionLabel" multiple="multiple">
                      <option value="option-1">Option 1</option>
                      <option value="option-2">Option 2</option>
                      <option value="option-3">Option 3</option>
                      <option value="option-4">Option 4</option>
                      <option value="option-5">Option 5</option>
                      <option value="option-6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id=&quot;example-label&quot; multiple=&quot;multiple&quot;&gt;
    &lt;option value=&quot;option-1&quot;&gt;Option 1&lt;/option&gt;
    &lt;option value=&quot;option-2&quot;&gt;Option 2&lt;/option&gt;
    &lt;option value=&quot;option-3&quot;&gt;Option 3&lt;/option&gt;
    &lt;option value=&quot;option-4&quot;&gt;Option 4&lt;/option&gt;
    &lt;option value=&quot;option-5&quot;&gt;Option 5&lt;/option&gt;
    &lt;option value=&quot;option-6&quot;&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-optionLabel').multiselect({
    optionLabel: function(element) {
        return $(element).html() + ' (' + $(element).val() + ')';
    }
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-optionClass">optionClass</code></td>
              <td>
                <p>一个回调，用于定义<code>li</code>包含复选框和标签的元素的类。</p>
                <div class="code-window">
                  <div class="code-preview">
                    <div id="example-optionClass-container">
                      <select id="example-optionClass" multiple="multiple">
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                        <option value="3">Option 3</option>
                        <option value="4">Option 4</option>
                        <option value="5">Option 5</option>
                        <option value="6">Option 6</option>
                      </select>
                    </div>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;div id=&quot;example-optionClass-container&quot;&gt;
    &lt;select id=&quot;example-optionClass&quot; multiple=&quot;multiple&quot;&gt;
        &lt;option value=&quot;1&quot;&gt;Option 1&lt;/option&gt;
        &lt;option value=&quot;2&quot;&gt;Option 2&lt;/option&gt;
        &lt;option value=&quot;3&quot;&gt;Option 3&lt;/option&gt;
        &lt;option value=&quot;4&quot;&gt;Option 4&lt;/option&gt;
        &lt;option value=&quot;5&quot;&gt;Option 5&lt;/option&gt;
        &lt;option value=&quot;6&quot;&gt;Option 6&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-optionClass').multiselect({
    optionClass: function(element) {
        var value = $(element).val();
        if (value % 2 == 0) {
            return 'even';
        } else {
            return 'odd';
        }
    }
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-selectedClass">selectedClass</code></td>
              <td>
                <p>应用于所选选项的<code>class</code>。</p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-selectedClass" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-selectedClass" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-css">#example-selectedClass-container li.multiselect-selected a label {
    color: red;
}
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-selectedClass').multiselect({
    buttonContainer: '&lt;div class=&quot;btn-group&quot; id=&quot;example-selectedClass-container&quot;&gt;&lt;/div&gt;',
    selectedClass: 'active multiselect-selected'
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-includeSelectAllOption">includeSelectAllOption</code></td>
              <td>
                <p>设置为<code>true</code> 或 <code>false</code>以启用或禁用全选选项。 </p>
                <p class="alert alert-info"> 要查看同时使用全选选项和过滤器的示例，请参阅该 <code>enableFiltering</code> 选项的文档。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-includeSelectAllOption" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-includeSelectAllOption" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-includeSelectAllOption').multiselect({
    includeSelectAllOption: true
});
</code></pre>
                </div>
                <p><code>includeSelectAllOption</code> 选项也可以与一起使用<code>optgroup</code></p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-includeSelectAllOption-optgroups" multiple="multiple">
                      <optgroup label="Group 1">
                        <option value="1-1">Option 1.1</option>
                        <option value="1-2" selected="selected">Option 1.2</option>
                        <option value="1-3" selected="selected">Option 1.3</option></optgroup>
                      <optgroup label="Group 2">
                        <option value="2-1">Option 2.1</option>
                        <option value="2-2">Option 2.2</option>
                        <option value="2-3">Option 2.3</option></optgroup>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-includeSelectAllOption-optgroups" multiple="multiple"&gt;
  &lt;optgroup label="Group 1"&gt;
    &lt;option value="1-1"&gt;Option 1.1&lt;/option&gt;
    &lt;option value="1-2" selected="selected"&gt;Option 1.2&lt;/option&gt;
    &lt;option value="1-3" selected="selected"&gt;Option 1.3&lt;/option&gt;&lt;/optgroup&gt;
  &lt;optgroup label="Group 2"&gt;
    &lt;option value="2-1"&gt;Option 2.1&lt;/option&gt;
    &lt;option value="2-2"&gt;Option 2.2&lt;/option&gt;
    &lt;option value="2-3"&gt;Option 2.3&lt;/option&gt;&lt;/optgroup&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-includeSelectAllOption-optgroups').multiselect({
    includeSelectAllOption: true
});
</code></pre>
                </div>
                <p>请注意，全选不会触发<code>onChange</code> 事件，而只会触发 <code>onSelectAll</code> 事件： </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-includeSelectAllOption-onChange" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-includeSelectAllOption-onChange" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-includeSelectAllOption-onChange').multiselect({
    includeSelectAllOption: true,
    onChange: function(option, checked) {
        alert('Not triggered when clicking the select all!');
    },
});
</code></pre>
                </div>
                <p>选择所有元素自然会尊重禁用的元素： </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-includeSelectAllOption-disbled" multiple="multiple">
                      <option value="1" disabled="disabled">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-includeSelectAllOption-disbled" multiple="multiple"&gt;
  &lt;option value="1" disabled="disabled"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-includeSelectAllOption-disbled').multiselect({
    includeSelectAllOption: true
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-selectAllJustVisible">selectAllJustVisible</code></td>
              <td>
                <p>将 <code>includeSelectAllOption</code> 和都设置 <code>enableFiltering</code> to <code>true</code>, t全选选项始终仅选择可见选项。对于设置 <code>selectAllJustVisible</code> to <code>false</code> 这种行为改变，使得一直（不管它们是否可见）的所有选项都被选中。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-selectAllJustVisible" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-selectAllJustVisible" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-selectAllJustVisible').multiselect({
    enableFiltering: true,
    includeSelectAllOption: true,
    selectAllJustVisible: false
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-selectAllText">selectAllText</code></td>
              <td>
                <p>为全选选项显示的文本。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-selectAllText" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-selectAllText" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-selectAllText').multiselect({
    includeSelectAllOption: true,
    selectAllText: 'Check all!'
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-selectAllValue">selectAllValue</code></td>
              <td>
                <p>“全选”选项作为附加添加<code>option</code> within the <code>select</code>。为了将此选项与原始选项区分开，可以使用<code>selectAllValue</code>选项配置用于全选选项的值。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-selectAllValue" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-selectAllValue" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-selectAllValue').multiselect({
    includeSelectAllOption: true,
    selectAllValue: 'select-all-value'
});
</code></pre>
                </div>
                <p><code>selectAllValue</code> 选项通常应该是一个字符串，但是数值也可以工作：</p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-selectAllValue-numeric" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-selectAllValue-numeric" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-selectAllValue-numeric').multiselect({
    includeSelectAllOption: true,

    selectAllValue: 0
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-selectAllName">selectAllName</code></td>
              <td>
                <p>此选项允许控制为全选选项指定的名称。有关更多详细信息，请参见<a href="#post">服务器端处理。</a></p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-selectAllName" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-selectAllName" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-selectAllName').multiselect({
    includeSelectAllOption: true,
    selectAllName: 'select-all-name'
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-selectAllNumber">selectAllNumber</code></td>
              <td>
                <p>如果设置为<code>true</code>（默认），则选中所有选项后，所选选项的数量将以括号显示。以下示例显示了将selectalloption<code>selectAllNumber</code>设置为的行为<code>false</code>: </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-selectAllNumber" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-selectAllNumber" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-selectAllNumber').multiselect({
    includeSelectAllOption: true,
    selectAllNumber: false
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-onSelectAll">onSelectAll</code></td>
              <td>
                <p>当使用全选选项选择所有选项时，将触发此功能。请注意，这也可以使用<code>.multiselect('selectAll')</code>方法手动触发。 </p>
                <p class="alert alert-warning"> 请注意，<code>onChange</code> 当使用“全选”选项（取消）选择所有选项时，不会触发该选项。 </p>
                <p class="alert alert-warning"> 该 <code>onSelectAll</code> 如果选择所有选项被选中选项时，才会触发; 如果手动检查了所有选项，则不会触发（也将选中“全选”选项）。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-onSelectAll" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-onSelectAll" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-onSelectAll').multiselect({
    includeSelectAllOption: true,
    onSelectAll: function() {
        alert('onSelectAll triggered!');
    }
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-onDeselectAll">onDeselectAll</code></td>
              <td>
                <p>当使用全选选项取消选择所有选项时，将触发此功能。请注意，这也可以使用<code>.multiselect('deselectAll')</code> 方法手动触发。 </p>
                <p class="alert alert-warning"> 请注意，<code>onChange</code> 当使用“全选”选项（取消）选择所有选项时，不会触发该选项。 </p>
                <p class="alert alert-warning"><code>onDeselectAll</code> 仅当未选中“全选 ” 选项时，才会触发该选项。如果未手动选中所有选项，则不会触发该操作（也将取消选中“全选”选项）。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-onDeselectAll" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-onDeselectAll" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-onDeselectAll').multiselect({
    includeSelectAllOption: true,
    onDeselectAll: function() {
        alert('onDeselectAll triggered!');
    }
})
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-enableFiltering">enableFiltering</code></td>
              <td>
                <p>设置为<code>true</code> 或 <code>false</code> 以启用或禁用过滤器。 <code>input</code> 将添加一个过滤器以动态过滤所有选项。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-enableFiltering" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                      <option value="7">Option 7</option>
                      <option value="8">Option 8</option>
                      <option value="9">Option 9</option>
                      <option value="10">Option 10</option>
                      <option value="11">Option 11</option>
                      <option value="12">Option 12</option>
                      <option value="13">Option 13</option>
                      <option value="14">Option 14</option>
                      <option value="15">Option 15</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-enableFiltering" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
  &lt;option value="7"&gt;Option 7&lt;/option&gt;
  &lt;option value="8"&gt;Option 8&lt;/option&gt;
  &lt;option value="9"&gt;Option 9&lt;/option&gt;
  &lt;option value="10"&gt;Option 10&lt;/option&gt;
  &lt;option value="11"&gt;Option 11&lt;/option&gt;
  &lt;option value="12"&gt;Option 12&lt;/option&gt;
  &lt;option value="13"&gt;Option 13&lt;/option&gt;
  &lt;option value="14"&gt;Option 14&lt;/option&gt;
  &lt;option value="15"&gt;Option 15&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-enableFiltering').multiselect({
    enableFiltering: true
});
</code></pre>
                </div>
                <p><code>enableFiltering</code> 选项可以轻松地与以下 <code>includeSelectAllOption</code> 选项结合使用： </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-enableFiltering-includeSelectAllOption" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                      <option value="7">Option 7</option>
                      <option value="8">Option 8</option>
                      <option value="9">Option 9</option>
                      <option value="10">Option 10</option>
                      <option value="11">Option 11</option>
                      <option value="12">Option 12</option>
                      <option value="13">Option 13</option>
                      <option value="14">Option 14</option>
                      <option value="15">Option 15</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-enableFiltering-includeSelectAllOption" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
  &lt;option value="7"&gt;Option 7&lt;/option&gt;
  &lt;option value="8"&gt;Option 8&lt;/option&gt;
  &lt;option value="9"&gt;Option 9&lt;/option&gt;
  &lt;option value="10"&gt;Option 10&lt;/option&gt;
  &lt;option value="11"&gt;Option 11&lt;/option&gt;
  &lt;option value="12"&gt;Option 12&lt;/option&gt;
  &lt;option value="13"&gt;Option 13&lt;/option&gt;
  &lt;option value="14"&gt;Option 14&lt;/option&gt;
  &lt;option value="15"&gt;Option 15&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-enableFiltering-includeSelectAllOption').multiselect({
    includeSelectAllOption: true,
    enableFiltering: true
});
</code></pre>
                </div>
                <p><code>enableFiltering</code> 选项也可以与一起使用 <code>optgroup</code></p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-enableFiltering-optgroups" multiple="multiple">
                      <optgroup label="Group 1">
                        <option value="1-1">Option 1.1</option>
                        <option value="1-2" selected="selected">Option 1.2</option>
                        <option value="1-3" selected="selected">Option 1.3</option></optgroup>
                      <optgroup label="Group 2">
                        <option value="2-1">Option 2.1</option>
                        <option value="2-2">Option 2.2</option>
                        <option value="2-3">Option 2.3</option></optgroup>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-enableFiltering-optgroups" multiple="multiple"&gt;
  &lt;optgroup label="Group 1"&gt;
    &lt;option value="1-1"&gt;Option 1.1&lt;/option&gt;
    &lt;option value="1-2" selected="selected"&gt;Option 1.2&lt;/option&gt;
    &lt;option value="1-3" selected="selected"&gt;Option 1.3&lt;/option&gt;&lt;/optgroup&gt;
  &lt;optgroup label="Group 2"&gt;
    &lt;option value="2-1"&gt;Option 2.1&lt;/option&gt;
    &lt;option value="2-2"&gt;Option 2.2&lt;/option&gt;
    &lt;option value="2-3"&gt;Option 2.3&lt;/option&gt;&lt;/optgroup&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-example-enableFiltering-optgroups').multiselect({
    enableFiltering: true
});
</code></pre>
                </div>
                <p>Clickable <code>optgroup</code>也受支持： </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-enableFiltering-enableClickableOptGroups" multiple="multiple">
                      <optgroup label="Group 1">
                        <option value="1-1">Option 1.1</option>
                        <option value="1-2" selected="selected">Option 1.2</option>
                        <option value="1-3" selected="selected">Option 1.3</option></optgroup>
                      <optgroup label="Group 2">
                        <option value="2-1">Option 2.1</option>
                        <option value="2-2">Option 2.2</option>
                        <option value="2-3">Option 2.3</option></optgroup>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-enableFiltering-enableClickableOptGroups" multiple="multiple"&gt;
  &lt;optgroup label="Group 1"&gt;
    &lt;option value="1-1"&gt;Option 1.1&lt;/option&gt;
    &lt;option value="1-2" selected="selected"&gt;Option 1.2&lt;/option&gt;
    &lt;option value="1-3" selected="selected"&gt;Option 1.3&lt;/option&gt;&lt;/optgroup&gt;
  &lt;optgroup label="Group 2"&gt;
    &lt;option value="2-1"&gt;Option 2.1&lt;/option&gt;
    &lt;option value="2-2"&gt;Option 2.2&lt;/option&gt;
    &lt;option value="2-3"&gt;Option 2.3&lt;/option&gt;&lt;/optgroup&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-example-enableFiltering-enableClickableOptgroups').multiselect({
    enableFiltering: true,
    enableClickableOptGroups: true
});
</code></pre>
                </div>
                <p>最后，该选项还可以与 <code>onChange</code> 或类似事件一起使用： </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-enableFiltering-onChange-onDropdownHide" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                      <option value="7">Option 7</option>
                      <option value="8">Option 8</option>
                      <option value="9">Option 9</option>
                      <option value="10">Option 10</option>
                      <option value="11">Option 11</option>
                      <option value="12">Option 12</option>
                      <option value="13">Option 13</option>
                      <option value="14">Option 14</option>
                      <option value="15">Option 15</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-enableFiltering-onChange-onDropdownHide" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
  &lt;option value="7"&gt;Option 7&lt;/option&gt;
  &lt;option value="8"&gt;Option 8&lt;/option&gt;
  &lt;option value="9"&gt;Option 9&lt;/option&gt;
  &lt;option value="10"&gt;Option 10&lt;/option&gt;
  &lt;option value="11"&gt;Option 11&lt;/option&gt;
  &lt;option value="12"&gt;Option 12&lt;/option&gt;
  &lt;option value="13"&gt;Option 13&lt;/option&gt;
  &lt;option value="14"&gt;Option 14&lt;/option&gt;
  &lt;option value="15"&gt;Option 15&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-enableFiltering-onChange-onDropdownHide').multiselect({
    enableFiltering: true,
    onChange: function(option, checked) {
        alert('onChange!');
    },
    onDropdownHide: function(event) {
        alert('onDropdownHide!');
    }
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-enableCaseInsensitiveFiltering">enableCaseInsensitiveFiltering</code></td>
              <td>
                <p>上面配置的过滤器将使用区分大小写的过滤，通过对此行为进行设置 <code>enableCaseInsensitiveFiltering</code> to <code>true</code> 可以将其更改为使用区分大小写的过滤。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-enableCaseInsensitiveFiltering" multiple="multiple">
                      <option value="1">OpTiOn 1</option>
                      <option value="2">OpTiOn 2</option>
                      <option value="3">OpTiOn 3</option>
                      <option value="4">OpTiOn 4</option>
                      <option value="5">OpTiOn 5</option>
                      <option value="6">OpTiOn 6</option>
                      <option value="7">OpTiOn 7</option>
                      <option value="8">OpTiOn 8</option>
                      <option value="9">OpTiOn 9</option>
                      <option value="10">OpTiOn 10</option>
                      <option value="11">OpTiOn 11</option>
                      <option value="12">OpTiOn 12</option>
                      <option value="13">OpTiOn 13</option>
                      <option value="14">OpTiOn 14</option>
                      <option value="15">OpTiOn 15</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-enableCaseInsensitiveFiltering" multiple="multiple"&gt;
  &lt;option value="1"&gt;OpTiOn 1&lt;/option&gt;
  &lt;option value="2"&gt;OpTiOn 2&lt;/option&gt;
  &lt;option value="3"&gt;OpTiOn 3&lt;/option&gt;
  &lt;option value="4"&gt;OpTiOn 4&lt;/option&gt;
  &lt;option value="5"&gt;OpTiOn 5&lt;/option&gt;
  &lt;option value="6"&gt;OpTiOn 6&lt;/option&gt;
  &lt;option value="7"&gt;OpTiOn 7&lt;/option&gt;
  &lt;option value="8"&gt;OpTiOn 8&lt;/option&gt;
  &lt;option value="9"&gt;OpTiOn 9&lt;/option&gt;
  &lt;option value="10"&gt;OpTiOn 10&lt;/option&gt;
  &lt;option value="11"&gt;OpTiOn 11&lt;/option&gt;
  &lt;option value="12"&gt;OpTiOn 12&lt;/option&gt;
  &lt;option value="13"&gt;OpTiOn 13&lt;/option&gt;
  &lt;option value="14"&gt;OpTiOn 14&lt;/option&gt;
  &lt;option value="15"&gt;OpTiOn 15&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-enableCaseInsensitiveFiltering').multiselect({
    enableCaseInsensitiveFiltering: true
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-enableFullValueFiltering">enableFullValueFiltering</code></td>
              <td>
                <p>设置为<code>true</code>启用全值过滤，即显示所有查询的前缀的选项。此处给出一个示例： <a href="https://github.com/davidstutz/bootstrap-multiselect/pull/555">#555</a>. </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-enableFullValueFiltering" multiple="multiple">
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                      <option value="4">Option 4</option>
                      <option value="5">Option 5</option>
                      <option value="6">Option 6</option>
                      <option value="7">Option 7</option>
                      <option value="8">Option 8</option>
                      <option value="9">Option 9</option>
                      <option value="10">Option 10</option>
                      <option value="11">Option 11</option>
                      <option value="12">Option 12</option>
                      <option value="13">Option 13</option>
                      <option value="14">Option 14</option>
                      <option value="15">Option 15</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-enableFullValueFiltering" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
  &lt;option value="7"&gt;Option 7&lt;/option&gt;
  &lt;option value="8"&gt;Option 8&lt;/option&gt;
  &lt;option value="9"&gt;Option 9&lt;/option&gt;
  &lt;option value="10"&gt;Option 10&lt;/option&gt;
  &lt;option value="11"&gt;Option 11&lt;/option&gt;
  &lt;option value="12"&gt;Option 12&lt;/option&gt;
  &lt;option value="13"&gt;Option 13&lt;/option&gt;
  &lt;option value="14"&gt;Option 14&lt;/option&gt;
  &lt;option value="15"&gt;Option 15&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-enableFullValueFiltering').multiselect({
    enableFiltering: true,
    enableFullValueFiltering: true
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-filterBehavior">filterBehavior</code></td>
              <td>
                <p>根据选项过滤选项<code>text</code>。可以更改此行为以使用<code>value</code> 选项的或 <code>both</code> 文本和值。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-filterBehavior" multiple="multiple">
                      <option value="a">Option 1</option>
                      <option value="b">Option 2</option>
                      <option value="c">Option 3</option>
                      <option value="d">Option 4</option>
                      <option value="e">Option 5</option>
                      <option value="f">Option 6</option>
                      <option value="g">Option 7</option>
                      <option value="h">Option 8</option>
                      <option value="i">Option 9</option>
                      <option value="j">Option 10</option>
                      <option value="k">Option 11</option>
                      <option value="l">Option 12</option>
                      <option value="m">Option 13</option>
                      <option value="n">Option 14</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-filterBehavior" multiple="multiple"&gt;
  &lt;option value="a"&gt;Option 1&lt;/option&gt;
  &lt;option value="b"&gt;Option 2&lt;/option&gt;
  &lt;option value="c"&gt;Option 3&lt;/option&gt;
  &lt;option value="d"&gt;Option 4&lt;/option&gt;
  &lt;option value="e"&gt;Option 5&lt;/option&gt;
  &lt;option value="f"&gt;Option 6&lt;/option&gt;
  &lt;option value="g"&gt;Option 7&lt;/option&gt;
  &lt;option value="h"&gt;Option 8&lt;/option&gt;
  &lt;option value="i"&gt;Option 9&lt;/option&gt;
  &lt;option value="j"&gt;Option 10&lt;/option&gt;
  &lt;option value="k"&gt;Option 11&lt;/option&gt;
  &lt;option value="l"&gt;Option 12&lt;/option&gt;
  &lt;option value="m"&gt;Option 13&lt;/option&gt;
  &lt;option value="n"&gt;Option 14&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-filterBehavior').multiselect({
    enableFiltering: true,
    filterBehavior: 'value'
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-filterPlaceholder">filterPlaceholder</code></td>
              <td>
                <p>用于过滤器输入的占位符。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-filter-placeholder" multiple="multiple">
                      <option value="a">Option 1</option>
                      <option value="b">Option 2</option>
                      <option value="c">Option 3</option>
                      <option value="d">Option 4</option>
                      <option value="e">Option 5</option>
                      <option value="f">Option 6</option>
                      <option value="g">Option 7</option>
                      <option value="h">Option 8</option>
                      <option value="i">Option 9</option>
                      <option value="j">Option 10</option>
                      <option value="k">Option 11</option>
                      <option value="l">Option 12</option>
                      <option value="m">Option 13</option>
                      <option value="n">Option 14</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-filter-placeholder" multiple="multiple"&gt;
    &lt;option value=&quot;a"&gt;Option 1&lt;/option&gt;
    &lt;option value="b"&gt;Option 2&lt;/option&gt;
    &lt;option value="c"&gt;Option 3&lt;/option&gt;
    &lt;option value="d"&gt;Option 4&lt;/option&gt;
    &lt;option value="e"&gt;Option 5&lt;/option&gt;
    &lt;option value="f"&gt;Option 6&lt;/option&gt;
    &lt;option value="g"&gt;Option 7&lt;/option&gt;
    &lt;option value="h"&gt;Option 8&lt;/option&gt;
    &lt;option value="i"&gt;Option 9&lt;/option&gt;
    &lt;option value="j"&gt;Option 10&lt;/option&gt;
    &lt;option value="k"&gt;Option 11&lt;/option&gt;
    &lt;option value="l"&gt;Option 12&lt;/option&gt;
    &lt;option value="m"&gt;Option 13&lt;/option&gt;
    &lt;option value="n"&gt;Option 14&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-filter-placeholder').multiselect({
    enableFiltering: true,
    filterPlaceholder: 'Search for something...'
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-includeResetOption">includeResetOption</code></td>
              <td>
                <p>在下拉菜单中添加重置按钮。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-include-reset-option" multiple="multiple">
                      <option value="a">Option 1</option>
                      <option value="b">Option 2</option>
                      <option value="c">Option 3</option>
                      <option value="d">Option 4</option>
                      <option value="e">Option 5</option>
                      <option value="f">Option 6</option>
                      <option value="g">Option 7</option>
                      <option value="h">Option 8</option>
                      <option value="i">Option 9</option>
                      <option value="j">Option 10</option>
                      <option value="k">Option 11</option>
                      <option value="l">Option 12</option>
                      <option value="m">Option 13</option>
                      <option value="n">Option 14</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-include-reset-option" multiple="multiple"&gt;
    &lt;option value=&quot;a"&gt;Option 1&lt;/option&gt;
    &lt;option value="b"&gt;Option 2&lt;/option&gt;
    &lt;option value="c"&gt;Option 3&lt;/option&gt;
    &lt;option value="d"&gt;Option 4&lt;/option&gt;
    &lt;option value="e"&gt;Option 5&lt;/option&gt;
    &lt;option value="f"&gt;Option 6&lt;/option&gt;
    &lt;option value="g"&gt;Option 7&lt;/option&gt;
    &lt;option value="h"&gt;Option 8&lt;/option&gt;
    &lt;option value="i"&gt;Option 9&lt;/option&gt;
    &lt;option value="j"&gt;Option 10&lt;/option&gt;
    &lt;option value="k"&gt;Option 11&lt;/option&gt;
    &lt;option value="l"&gt;Option 12&lt;/option&gt;
    &lt;option value="m"&gt;Option 13&lt;/option&gt;
    &lt;option value="n"&gt;Option 14&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-include-reset-option').multiselect({
    includeResetOption: true
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-includeResetDivider">includeResetDivider</code></td>
              <td>
                <p>在重置按钮和选项之间添加分隔线。</p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-include-reset-divider" multiple="multiple">
                      <option value="a">Option 1</option>
                      <option value="b">Option 2</option>
                      <option value="c">Option 3</option>
                      <option value="d">Option 4</option>
                      <option value="e">Option 5</option>
                      <option value="f">Option 6</option>
                      <option value="g">Option 7</option>
                      <option value="h">Option 8</option>
                      <option value="i">Option 9</option>
                      <option value="j">Option 10</option>
                      <option value="k">Option 11</option>
                      <option value="l">Option 12</option>
                      <option value="m">Option 13</option>
                      <option value="n">Option 14</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-include-reset-divider" multiple="multiple"&gt;
    &lt;option value=&quot;a"&gt;Option 1&lt;/option&gt;
    &lt;option value="b"&gt;Option 2&lt;/option&gt;
    &lt;option value="c"&gt;Option 3&lt;/option&gt;
    &lt;option value="d"&gt;Option 4&lt;/option&gt;
    &lt;option value="e"&gt;Option 5&lt;/option&gt;
    &lt;option value="f"&gt;Option 6&lt;/option&gt;
    &lt;option value="g"&gt;Option 7&lt;/option&gt;
    &lt;option value="h"&gt;Option 8&lt;/option&gt;
    &lt;option value="i"&gt;Option 9&lt;/option&gt;
    &lt;option value="j"&gt;Option 10&lt;/option&gt;
    &lt;option value="k"&gt;Option 11&lt;/option&gt;
    &lt;option value="l"&gt;Option 12&lt;/option&gt;
    &lt;option value="m"&gt;Option 13&lt;/option&gt;
    &lt;option value="n"&gt;Option 14&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-include-reset-divider').multiselect({
    includeResetOption: true,
    includeResetDivider: true
});
</code></pre>
                </div>
              </td>
            </tr>
            <tr>
              <td><code id="configuration-options-resetText">resetText</code></td>
              <td>
                <p>在下拉菜单中添加重置按钮。 </p>
                <div class="code-window">
                  <div class="code-preview">
                    <select id="example-reset-text" multiple="multiple">
                      <option value="a">Option 1</option>
                      <option value="b">Option 2</option>
                      <option value="c">Option 3</option>
                      <option value="d">Option 4</option>
                      <option value="e">Option 5</option>
                      <option value="f">Option 6</option>
                      <option value="g">Option 7</option>
                      <option value="h">Option 8</option>
                      <option value="i">Option 9</option>
                      <option value="j">Option 10</option>
                      <option value="k">Option 11</option>
                      <option value="l">Option 12</option>
                      <option value="m">Option 13</option>
                      <option value="n">Option 14</option>
                    </select>
                  </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-reset-text" multiple="multiple"&gt;
    &lt;option value=&quot;a"&gt;Option 1&lt;/option&gt;
    &lt;option value="b"&gt;Option 2&lt;/option&gt;
    &lt;option value="c"&gt;Option 3&lt;/option&gt;
    &lt;option value="d"&gt;Option 4&lt;/option&gt;
    &lt;option value="e"&gt;Option 5&lt;/option&gt;
    &lt;option value="f"&gt;Option 6&lt;/option&gt;
    &lt;option value="g"&gt;Option 7&lt;/option&gt;
    &lt;option value="h"&gt;Option 8&lt;/option&gt;
    &lt;option value="i"&gt;Option 9&lt;/option&gt;
    &lt;option value="j"&gt;Option 10&lt;/option&gt;
    &lt;option value="k"&gt;Option 11&lt;/option&gt;
    &lt;option value="l"&gt;Option 12&lt;/option&gt;
    &lt;option value="m"&gt;Option 13&lt;/option&gt;
    &lt;option value="n"&gt;Option 14&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-reset-text').multiselect({
    includeResetOption: true,
    resetText: "Reset all"
});
</code></pre>
                </div>
              </td>
            </tr>
            </tbody>
          </table>
          <h5><strong>模板</strong></h5>
          <p>可以使用模板来控制生成的HTML标记。基本上，模板是简单的配置选项。默认模板如下所示： </p>
          <p class="alert alert-warning"> 但是，请注意，弄乱模板的类可能会导致意外行为。例如，按钮应始终具有class <code>.multiselect</code>, </p>
          <p class="alert alert-info"> 此外，请注意，其他选项也可能会对模板产生影响，例如该<code>buttonClass</code> 选项。 </p>
<pre class="line-numbers"><code class="language-javascript">$('#example').multiselect({
    templates: {
        button: '&lt;button type=&quot;button&quot; class=&quot;multiselect dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;&lt;/button&gt;',
        ul: '&lt;ul class=&quot;multiselect-container dropdown-menu&quot;&gt;&lt;/ul&gt;',
        filter: '&lt;li class=&quot;multiselect-item filter&quot;&gt;&lt;div class=&quot;input-group&quot;&gt;&lt;span class=&quot;input-group-addon&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-search&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;input class=&quot;form-control multiselect-search&quot; type=&quot;text&quot;&gt;&lt;/div&gt;&lt;/li&gt;',
        filterClearBtn: '&lt;span class=&quot;input-group-btn&quot;&gt;&lt;button class=&quot;btn btn-default multiselect-clear-filter&quot; type=&quot;button&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-remove-circle&quot;&gt;&lt;/i&gt;&lt;/button&gt;&lt;/span&gt;',
        li: '&lt;li&gt;&lt;a href=&quot;javascript:void(0);&quot;&gt;&lt;label&gt;&lt;/label&gt;&lt;/a&gt;&lt;/li&gt;',
        divider: '&lt;li class=&quot;multiselect-item divider&quot;&gt;&lt;/li&gt;',
        liGroup: '&lt;li class=&quot;multiselect-item group&quot;&gt;&lt;label class=&quot;multiselect-group&quot;&gt;&lt;/label&gt;&lt;/li&gt;'
    }
});</code></pre>
          <p>例如，通过修改模板，可以使用其他元素代替按钮： </p>
          <div class="code-window">
            <div class="code-preview">
              <select id="example-templates-button" multiple="multiple">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
                <option value="4">Option 4</option>
                <option value="5">Option 5</option>
                <option value="6">Option 6</option>
              </select>
            </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-templates-button" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-templates-button').multiselect({
    buttonContainer: '&lt;div&gt;&lt;/div&gt;',
    buttonClass: '',
    templates: {
        button: '&lt;span class=&quot;multiselect dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;Click me!&lt;/span&gt;'
    }
});
</code></pre>
          </div>
          <p>最有趣的模板是<code>li</code> 允许自定义显示选项的模板。例如（有关详细信息，请参见 <a href="https://github.com/davidstutz/bootstrap-multiselect/pull/738">#738</a> ）以在选项中包括输入元素： </p>
          <div class="code-window">
            <div class="code-preview">
              <select id="example-templates-input" multiple="multiple">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
                <option value="4">Option 4</option>
                <option value="5">Option 5</option>
                <option value="6">Option 6</option>
              </select>
            </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-templates-input" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-templates-input').multiselect({
    templates: {
        li: '&lt;li&gt;&lt;a&gt;&lt;label style=&quot;display:inline;&quot;&gt;&lt;/label&gt;&lt;input type=&quot;text&quot; /&gt;&lt;/a&gt;&lt;/li&gt;'
    }
});
</code></pre>
          </div>
          <h5><strong>造型</strong></h5>
          <p>插件的样式可以通过CSS完全适应；下面显示了一个完整的示例-包括全选选项，过滤器和选项gorups_</p>
<pre class="line-numbers"><code class="language-html">
&lt;ul class=&quot;multiselect-container dropdown-menu&quot;&gt;
    &lt;!-- Filter --&gt;
    &lt;li class=&quot;multiselect-item multiselect-filter&quot; value=&quot;0&quot;&gt;
        &lt;div class=&quot;input-group&quot;&gt;
            &lt;span class=&quot;input-group-addon&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-search&quot;&gt;&lt;/i&gt;&lt;/span&gt;
            &lt;input class=&quot;form-control multiselect-search&quot; type=&quot;text&quot; placeholder=&quot;Search&quot;&gt;
            &lt;span class=&quot;input-group-btn&quot;&gt;
                &lt;button class=&quot;btn btn-default multiselect-clear-filter&quot; type=&quot;button&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-remove-circle&quot;&gt;&lt;/i&gt;&lt;/button&gt;
            &lt;/span&gt;
        &lt;/div&gt;
    &lt;/li&gt;
    &lt;!-- Select all --&gt;
    &lt;li class=&quot;multiselect-item multiselect-all&quot; style=&quot;border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(234, 234, 234); background: rgb(243, 243, 243);&quot;&gt;
        &lt;a tabindex=&quot;0&quot; class=&quot;multiselect-all&quot;&gt;&lt;label class=&quot;checkbox&quot; style=&quot;padding: 3px 20px 3px 35px;&quot;&gt;&lt;input type=&quot;checkbox&quot; value=&quot;multiselect-all&quot;&gt;  Select all&lt;/label&gt;&lt;/a&gt;
    &lt;/li&gt;
    &lt;!-- Collapsible and clickable opt group --&gt;
    &lt;li class=&quot;multiselect-item multiselect-group&quot;&gt;
        &lt;a href=&quot;javascript:void(0);&quot;&gt;
            &lt;label&gt;&lt;input type=&quot;checkbox&quot; value=&quot;undefined&quot;&gt;&lt;b&gt; Group 1&lt;/b&gt;&lt;/label&gt;
            &lt;span class=&quot;caret-container&quot;&gt;&lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;&lt;/span&gt;
        &lt;/a&gt;
    &lt;/li&gt;
    &lt;!-- Disabled and hidden option (hidden because of collapsible opt groups) --&gt;
    &lt;li class=&quot;disabled hidden&quot;&gt;
        &lt;a tabindex=&quot;-1&quot;&gt;&lt;label class=&quot;checkbox&quot;&gt;&lt;input type=&quot;checkbox&quot; value=&quot;1-1&quot; disabled=&quot;&quot;&gt; Option 1.1&lt;/label&gt;&lt;/a&gt;
    &lt;/li&gt;
    &lt;!-- Hidden but select option --&gt;
    &lt;li class=&quot;active hidden&quot;&gt;
        &lt;a tabindex=&quot;0&quot;&gt;&lt;label class=&quot;checkbox&quot;&gt;&lt;input type=&quot;checkbox&quot; value=&quot;1-2&quot;&gt; Option 1.2&lt;/label&gt;&lt;/a&gt;
    &lt;/li&gt;
    &lt;!-- ... --&gt;
    &lt;!-- Another opt group --&gt;
    &lt;li class=&quot;multiselect-item multiselect-group&quot;&gt;
        &lt;a href=&quot;javascript:void(0);&quot;&gt;
            &lt;label&gt;&lt;input type=&quot;checkbox&quot; value=&quot;undefined&quot;&gt;&lt;b&gt; Group 2&lt;/b&gt;&lt;/label&gt;
            &lt;span class=&quot;caret-container&quot;&gt;&lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;&lt;/span&gt;
        &lt;/a&gt;
    &lt;/li&gt;
    &lt;!-- Visible but not selected option --&gt;
    &lt;li&gt;
        &lt;a tabindex=&quot;0&quot;&gt;&lt;label class=&quot;checkbox&quot;&gt;&lt;input type=&quot;checkbox&quot; value=&quot;2-1&quot;&gt; Option 2.1&lt;/label&gt;&lt;/a&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>
          <p>最重要的类别是： <code>multiselect-container</code>, <code>multiselect-filter</code>, <code>multiselect-all</code>, <code>multiselect-item</code>, <code>multiselect-group</code> as well as <code>disabled</code> and <code>active</code>。折叠和过滤选项均使用类 <code>multiselect-filter-hidden</code> and <code>multiselect-collapsible-hidden</code> are used. </p>
          <h5><strong>方法</strong></h5>
          <table class="table layout-fixed">
            <tbody>
              <tr>
                <td width="30%"><code>.multiselect('destroy')</code></td>
                <td>
                  <p>此方法用于销毁给定元素上的插件-意味着取消绑定插件。 </p>
                  <div class="code-window">
                    <div class="code-preview">
                      <div class="btn-group">
                        <button id="example-destroy-button" class="btn btn-danger">Destroy/Unbind</button>
                        <select id="example-destroy" multiple="multiple">
                          <option value="1">Option 1</option>
                          <option value="2">Option 2</option>
                          <option value="3">Option 3</option>
                          <option value="4">Option 4</option>
                          <option value="5">Option 5</option>
                          <option value="6">Option 6</option>
                        </select>
                      </div>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;div class="btn-group"&gt;
  &lt;button id="example-destroy-button" class="btn btn-danger"&gt;Destroy/Unbind&lt;/button&gt;&lt;
  &lt;select id="example-destroy" multiple="multiple"&gt;
    &lt;option value="1"&gt;Option 1&lt;/option&gt;
    &lt;option value="2"&gt;Option 2&lt;/option&gt;
    &lt;option value="3"&gt;Option 3&lt;/option&gt;
    &lt;option value="4"&gt;Option 4&lt;/option&gt;
    &lt;option value="5"&gt;Option 5&lt;/option&gt;
    &lt;option value="6"&gt;Option 6&lt;/option&gt;
  &lt;/select&gt;
&lt;/div&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-destroy').multiselect();
$('#example-destroy-button').on('click', function() {
    $('#example-destroy').multiselect('destroy');
});
</code></pre>
                  </div>
                </td>
              </tr>
              <tr>
                <td><code>.multiselect('refresh')</code></td>
                <td>
                  <p>此方法用于根据中的当前选择的选项刷新选中的复选框 <code>select</code>。点击“选择一些选项”以选择一些选项。然后单击刷新。插件将相应地更新复选框。 </p>
                  <div class="code-window">
                    <div class="code-preview">
                      <div class="btn-group">
                        <select id="example-refresh" multiple="multiple">
                          <option value="1">Option 1</option>
                          <option value="2">Option 2</option>
                          <option value="3">Option 3</option>
                          <option value="4">Option 4</option>
                          <option value="5">Option 5</option>
                          <option value="6">Option 6</option>
                        </select>
                        <button id="example-refresh-select" class="btn btn-default">Select some options!</button>
                        <button id="example-refresh-deselect" class="btn btn-default">Deselect some options...</button>
                        <button id="example-refresh-button" class="btn btn-primary">Refresh</button>
                      </div>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;div class="btn-group"&gt;
  &lt;select id="example-refresh" multiple="multiple"&gt;
    &lt;option value="1"&gt;Option 1&lt;/option&gt;
    &lt;option value="2"&gt;Option 2&lt;/option&gt;
    &lt;option value="3"&gt;Option 3&lt;/option&gt;
    &lt;option value="4"&gt;Option 4&lt;/option&gt;
    &lt;option value="5"&gt;Option 5&lt;/option&gt;
    &lt;option value="6"&gt;Option 6&lt;/option&gt;
  &lt;/select&gt;
  &lt;button id="example-refresh-select" class="btn btn-default"&gt;Select some options!&lt;/button&gt;
  &lt;button id="example-refresh-deselect" class="btn btn-default"&gt;Deselect some options...&lt;/button&gt;
  &lt;button id="example-refresh-button" class="btn btn-primary"&gt;Refresh&lt;/button&gt;
&lt;/div&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-refresh').multiselect();

$('#example-refresh-select').on('click', function() {
    $('option[value="1"]', $('#example-refresh')).prop('selected', true);
    $('option[value="3"]', $('#example-refresh')).prop('selected', true);
    $('option[value="4"]', $('#example-refresh')).prop('selected', true);

    alert('Option 1, 2 and 4.');
});

$('#example-refresh-deselect').on('click', function() {
    $('option', $('#example-refresh')).each(function(element) {
        $(this).removeAttr('selected').prop('selected', false);
    });
});

$('#example-refresh-button').on('click', function() {
    $('#example-refresh').multiselect('refresh');
});
</code></pre>
                  </div>
                </td>
              </tr>
              <tr>
                <td><code>.multiselect('rebuild')</code></td>
                <td>
                  <p>重建整个下拉菜单。所有选择的选项将保持选中状态（如果仍然存在！）。 </p>
                  <div class="code-window">
                    <div class="code-preview">
                      <div class="btn-group">
                        <select id="example-rebuild" multiple="multiple">
                          <option value="1">Option 1</option>
                          <option value="2">Option 2</option>
                          <option value="3">Option 3</option>
                          <option value="4">Option 4</option>
                          <option value="5">Option 5</option>
                          <option value="6">Option 6</option>
                        </select>
                        <button id="example-rebuild-add" class="btn btn-default">Add some options!</button>
                        <button id="example-rebuild-delete" class="btn btn-default">Remove some options...</button>
                        <button id="example-rebuild-button" class="btn btn-primary">Rebuild</button>
                      </div>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;div class="btn-group"&gt;
  &lt;select id="example-rebuild" multiple="multiple"&gt;
    &lt;option value="1"&gt;Option 1&lt;/option&gt;
    &lt;option value="2"&gt;Option 2&lt;/option&gt;
    &lt;option value="3"&gt;Option 3&lt;/option&gt;
    &lt;option value="4"&gt;Option 4&lt;/option&gt;
    &lt;option value="5"&gt;Option 5&lt;/option&gt;
    &lt;option value="6"&gt;Option 6&lt;/option&gt;
  &lt;/select&gt;
  &lt;button id="example-rebuild-add" class="btn btn-default"&gt;Add some options!&lt;/button&gt;
  &lt;button id="example-rebuild-delete" class="btn btn-default"&gt;Remove some options...&lt;/button&gt;
  &lt;button id="example-rebuild-button" class="btn btn-primary"&gt;Rebuild&lt;/button&gt;
&lt;/div&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-rebuild').multiselect();

$('#example-rebuild-button').on('click', function() {
    $('#example-rebuild').multiselect('rebuild');
});

$('#example-rebuild-add').on('click', function() {
    $('#example-rebuild').append('&lt;option value="add1"&gt;Addition 1&lt;/option&gt;&lt;option value="add2"&gt;Addition 2&lt;/option&gt;&lt;option value="add3"&gt;Addition 3&lt;/option&gt;');
});

$('#example-rebuild-delete').on('click', function() {
    $('option[value="add1"]', $('#example-rebuild')).remove();
    $('option[value="add2"]', $('#example-rebuild')).remove();
    $('option[value="add3"]', $('#example-rebuild')).remove();
});
</code></pre>
                  </div>
                </td>
              </tr>
              <tr>
                <td><code>.multiselect('select', value)</code></td>
                <td>
                  <p>根据其值选择一个选项。也可以使用值数组。 </p>
                  <div class="code-window">
                    <div class="code-preview">
                      <div class="btn-group">
                        <select id="example-select" multiple="multiple">
                          <option value="1">Option 1</option>
                          <option value="2">Option 2</option>
                          <option value="3">Option 3</option>
                          <option value="4">Option 4</option>
                          <option value="5">Option 5</option>
                          <option value="6">Option 6</option>
                        </select>
                        <button id="example-select-button" class="btn btn-default">Select some options...</button>
                      </div>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;div class="btn-group"&gt;
  &lt;select id="example-select" multiple="multiple"&gt;
    &lt;option value="1"&gt;Option 1&lt;/option&gt;
    &lt;option value="2"&gt;Option 2&lt;/option&gt;
    &lt;option value="3"&gt;Option 3&lt;/option&gt;
    &lt;option value="4"&gt;Option 4&lt;/option&gt;
    &lt;option value="5"&gt;Option 5&lt;/option&gt;
    &lt;option value="6"&gt;Option 6&lt;/option&gt;
  &lt;/select&gt;
  &lt;button id="example-select-button" class="btn btn-default"&gt;Select some options...&lt;/button&gt;
&lt;/div&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-select').multiselect();

$('#example-select-button').on('click', function() {
    $('#example-select').multiselect('select', ['1', '2', '4']);

    alert('Selected 1, 2 and 4.');
});
</code></pre>
                  </div>
                  <p>该方法提供了一个附加参数：<code>.multiselect('select', value, triggerOnChange)</code>。如果第二个参数设置为true，则该方法将手动触发该<code>onChange</code>选项。 </p>
                  <div class="code-window">
                    <div class="code-preview">
                      <div class="btn-group">
                        <select id="example-select-onChange" multiple="multiple">
                          <option value="1">Option 1</option>
                          <option value="2">Option 2</option>
                          <option value="3">Option 3</option>
                          <option value="4">Option 4</option>
                          <option value="5">Option 5</option>
                          <option value="6">Option 6</option>
                        </select>
                        <button id="example-select-onChange-button" class="btn btn-default">Select one option</button>
                      </div>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;div class="btn-group"&gt;
  &lt;select id="example-select-onChange" multiple="multiple"&gt;
    &lt;option value="1"&gt;Option 1&lt;/option&gt;
    &lt;option value="2"&gt;Option 2&lt;/option&gt;
    &lt;option value="3"&gt;Option 3&lt;/option&gt;
    &lt;option value="4"&gt;Option 4&lt;/option&gt;
    &lt;option value="5"&gt;Option 5&lt;/option&gt;
    &lt;option value="6"&gt;Option 6&lt;/option&gt;
  &lt;/select&gt;
  &lt;button id="example-select-onChange-button" class="btn btn-default"&gt;Select one option&lt;/button&gt;
&lt;/div&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-select-onChange').multiselect({
    onChange: function(option, checked, select) {
        alert('onChange triggered ...');
    }
});

$('#example-select-onChange-button').on('click', function() {
    $('#example-select-onChange').multiselect('select', '1', true);
});
</code></pre>
                  </div>
                  <p>选择乘数值时，上述参数也可以使用。请注意，<code>onChange</code>每个选择的选项都会单独调用！ </p>
                  <div class="code-window">
                    <div class="code-preview">
                      <div class="btn-group">
                        <select id="example-select-onChange-array" multiple="multiple">
                          <option value="1">Option 1</option>
                          <option value="2">Option 2</option>
                          <option value="3">Option 3</option>
                          <option value="4">Option 4</option>
                          <option value="5">Option 5</option>
                          <option value="6">Option 6</option>
                        </select>
                        <button id="example-select-onChange-array-button" class="btn btn-default">Select two options</button>
                      </div>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;div class="btn-group"&gt;
  &lt;select id="example-select-onChange-array" multiple="multiple"&gt;
    &lt;option value="1"&gt;Option 1&lt;/option&gt;
    &lt;option value="2"&gt;Option 2&lt;/option&gt;
    &lt;option value="3"&gt;Option 3&lt;/option&gt;
    &lt;option value="4"&gt;Option 4&lt;/option&gt;
    &lt;option value="5"&gt;Option 5&lt;/option&gt;
    &lt;option value="6"&gt;Option 6&lt;/option&gt;
  &lt;/select&gt;
  &lt;button id="example-select-onChange-array-button" class="btn btn-default"&gt;Select two options&lt;/button&gt;
&lt;/div&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-select-onChange-array').multiselect({
    onChange: function(option, checked, select) {
        alert('onChange triggered ...');
    }
});

$('#example-select-onChange-array-button').on('click', function() {
    $('#example-select-onChange-array').multiselect('select', ['1', '3'], true);
});
</code></pre>
                  </div>
                </td>
              </tr>
              <tr>
                <td><code>.multiselect('deselect', value)</code></td>
                <td>
                  <p>通过其值取消选择一个选项。也可以使用值数组。 </p>
                  <div class="code-window">
                    <div class="code-preview">
                      <div class="btn-group">
                        <select id="example-deselect" multiple="multiple">
                          <option value="1">Option 1</option>
                          <option value="2">Option 2</option>
                          <option value="3">Option 3</option>
                          <option value="4">Option 4</option>
                          <option value="5">Option 5</option>
                          <option value="6">Option 6</option>
                        </select>
                        <button id="example-deselect-button" class="btn btn-default">Deselect some options...</button>
                      </div>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;div class="btn-group"&gt;
  &lt;select id="example-deselect" multiple="multiple"&gt;
    &lt;option value="1"&gt;Option 1&lt;/option&gt;
    &lt;option value="2"&gt;Option 2&lt;/option&gt;
    &lt;option value="3"&gt;Option 3&lt;/option&gt;
    &lt;option value="4"&gt;Option 4&lt;/option&gt;
    &lt;option value="5"&gt;Option 5&lt;/option&gt;
    &lt;option value="6"&gt;Option 6&lt;/option&gt;
  &lt;/select&gt;
  &lt;button id="example-deselect-button" class="btn btn-default"&gt;Deselect some options...&lt;/button&gt;
&lt;/div&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-deselect').multiselect();

$('#example-deselect-button').on('click', function() {
    $('#example-deselect').multiselect('deselect', ['1', '2', '4']);

    alert('Deselected 1, 2 and 4.');
});
</code></pre>
                  </div>
                  <p>该方法提供了一个附加参数：<code>.multiselect('deselect', value, triggerOnChange)</code>。如果第二个参数设置为true，则该方法将手动触发该<code>onChange</code> 选项。 </p>
                  <div class="code-window">
                    <div class="code-preview">
                      <div class="btn-group">
                        <select id="example-deselect-onChange" multiple="multiple">
                          <option value="1">Option 1</option>
                          <option value="2">Option 2</option>
                          <option value="3">Option 3</option>
                          <option value="4">Option 4</option>
                          <option value="5">Option 5</option>
                          <option value="6">Option 6</option>
                        </select>
                        <button id="example-deselect-onChange-button" class="btn btn-default">Deselect one option</button>
                      </div>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;div class="btn-group"&gt;
  &lt;select id="example-deselect-onChange" multiple="multiple"&gt;
    &lt;option value="1"&gt;Option 1&lt;/option&gt;
    &lt;option value="2"&gt;Option 2&lt;/option&gt;
    &lt;option value="3"&gt;Option 3&lt;/option&gt;
    &lt;option value="4"&gt;Option 4&lt;/option&gt;
    &lt;option value="5"&gt;Option 5&lt;/option&gt;
    &lt;option value="6"&gt;Option 6&lt;/option&gt;
  &lt;/select&gt;
  &lt;button id="example-deselect-onChange-button" class="btn btn-default"&gt;Deselect one option&lt;/button&gt;
&lt;/div&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-deselect-onChange').multiselect({
    onChange: function(option, checked, select) {
        alert('onChange triggered ...');
    }
});

$('#example-deselect-onChange-button').on('click', function() {
    $('#example-deselect-onChange').multiselect('deselect', '1', true);
});
</code></pre>
                  </div>
                  
                  <p>取消选择多个选项时，上述参数也可以使用。请注意，<code>onChange</code>将分别为每个取消选择的选项调用。 </p>
                  <div class="code-window">
                    <div class="code-preview">
                      <div class="btn-group">
                        <select id="example-deselect-onChange-array" multiple="multiple">
                          <option value="1" selected>Option 1</option>
                          <option value="2">Option 2</option>
                          <option value="3" selected>Option 3</option>
                          <option value="4">Option 4</option>
                          <option value="5">Option 5</option>
                          <option value="6">Option 6</option>
                        </select>
                        <button id="example-deselect-onChange-array-button" class="btn btn-default">Deselect two options</button>
                      </div>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;div class="btn-group"&gt;
  &lt;select id="example-deselect-onChange-array" multiple="multiple"&gt;
    &lt;option value="1" selected&gt;Option 1&lt;/option&gt;
    &lt;option value="2"&gt;Option 2&lt;/option&gt;
    &lt;option value="3" selected&gt;Option 3&lt;/option&gt;
    &lt;option value="4"&gt;Option 4&lt;/option&gt;
    &lt;option value="5"&gt;Option 5&lt;/option&gt;
    &lt;option value="6"&gt;Option 6&lt;/option&gt;
  &lt;/select&gt;
  &lt;button id="example-deselect-onChange-array-button" class="btn btn-default"&gt;Deselect two options&lt;/button&gt;
&lt;/div&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-deselect-onChange-array').multiselect({
    onChange: function(option, checked, select) {
        alert('onChange triggered ...');
    }
});

$('#example-deselect-onChange-array-button').on('click', function() {
    $('#example-deselect-onChange-array').multiselect('deselect', '1', true);
});
</code></pre>
                  </div>
                </td>
              </tr>
              <tr>
                <td><code>.multiselect('selectAll', justVisible)</code></td>
                <td>
                  <p>选择所有选项。如果<code>justVisible</code> 设置为 <code>true</code>或不提供，则选择所有可见选项（使用过滤器时），否则选择所有选项（<code>justVisible</code>设置为<code>false</code></p>
                  <p class="alert alert-info"> 请注意，设置<code>justVisible</code> to <code>true</code>或不提供任何参数将选择所有可见选项，即需要打开下拉菜单。 </p>
                  <p class="alert alert-info"> 当前，需要在调用 <code>.multiselect('updateButtonText')</code> 之后手动调用 <code>.multiselect('selectAll', justVisible)</code>. </p>
                  <div class="code-window">
                    <div class="code-preview">
                      <div class="btn-group">
                        <select id="example-selectAll" multiple="multiple">
                          <option value="1">Option 1</option>
                          <option value="2">Option 2</option>
                          <option value="3">Option 3</option>
                          <option value="4">Option 4</option>
                          <option value="5">Option 5</option>
                          <option value="6">Option 6</option>
                        </select>
                        <button id="example-selectAll-visible" class="btn btn-default">Select all visible options</button>
                        <button id="example-selectAll-all" class="btn btn-default">Select all options</button>
                      </div>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;div class="btn-group"&gt;
  &lt;select id="example-selectAll" multiple="multiple"&gt;
    &lt;option value="1"&gt;Option 1&lt;/option&gt;
    &lt;option value="2"&gt;Option 2&lt;/option&gt;
    &lt;option value="3"&gt;Option 3&lt;/option&gt;
    &lt;option value="4"&gt;Option 4&lt;/option&gt;
    &lt;option value="5"&gt;Option 5&lt;/option&gt;
    &lt;option value="6"&gt;Option 6&lt;/option&gt;
                &lt;/select&gt;
  &lt;button id="example-selectAll-visible" class="btn btn-default"&gt;Select all visible options&lt;/button&gt;
  &lt;button id="example-selectAll-all" class="btn btn-default"&gt;Select all options&lt;/button&gt;
&lt;/div&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-selectAll').multiselect();

$('#example-selectAll-visible').on('click', function() {
    $('#example-selectAll').multiselect('selectAll', true);
    $('#example-selectAll').multiselect('updateButtonText');
});
$('#example-selectAll-all').on('click', function() {
    $('#example-selectAll').multiselect('selectAll', false);
    $('#example-selectAll').multiselect('updateButtonText');
});
</code></pre>
                  </div>
                </td>
              </tr>
              <tr>
                <td><code>.multiselect('deselectAll', justVisible)</code></td>
                <td>
                  <p>取消选择所有选项。如果<code>justVisible</code> 设置为 <code>true</code> 或不提供，则取消选择所有可见选项，否则取消选择（<code>justVisible</code>设置为<code>false</code>）所有选项。 </p>
                  <p class="alert alert-info"> 请注意，设置<code>justVisible</code> 为 <code>true</code>或不提供任何参数将选择所有可见选项，即需要打开下拉菜单。 </p>
                  <p class="alert alert-info"> 当前，需要在调用 <code>.multiselect('updateButtonText')</code> 之后手动调用 <code>.multiselect('selectAll', justVisible)</code>. </p>
                  <div class="code-window">
                    <div class="code-preview">
                      <div class="btn-group">
                        <select id="example-deselectAll" multiple="multiple">
                          <option value="1">Option 1</option>
                          <option value="2">Option 2</option>
                          <option value="3">Option 3</option>
                          <option value="4">Option 4</option>
                          <option value="5">Option 5</option>
                          <option value="6">Option 6</option>
                        </select>
                        <button id="example-deselectAll-visible" class="btn btn-default">Deselect all visible options</button>
                        <button id="example-deselectAll-all" class="btn btn-default">Deselect all options</button>
                      </div>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;div class="btn-group"&gt;
  &lt;select id="example-deselectAll" multiple="multiple"&gt;
    &lt;option value="1"&gt;Option 1&lt;/option&gt;
    &lt;option value="2"&gt;Option 2&lt;/option&gt;
    &lt;option value="3"&gt;Option 3&lt;/option&gt;
    &lt;option value="4"&gt;Option 4&lt;/option&gt;
    &lt;option value="5"&gt;Option 5&lt;/option&gt;
    &lt;option value="6"&gt;Option 6&lt;/option&gt;
  &lt;/select&gt;
  &lt;button id="example-deselectAll-visible" class="btn btn-default"&gt;Deselect all visible options&lt;/button&gt;
  &lt;button id="example-deselectAll-all" class="btn btn-default"&gt;Deselect all options&lt;/button&gt;
&lt;/div&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-deselectAll').multiselect();

$('#example-deselectAll-visible').on('click', function() {
    $('#example-deselectAll').multiselect('deselectAll', true);
    $('#example-deselectAll').multiselect('updateButtonText');
});
$('#example-deselectAll-all').on('click', function() {
    $('#example-deselectAll').multiselect('deselectAll', false);
    $('#example-deselectAll').multiselect('updateButtonText');
});
</code></pre>
                  </div>
                </td>
              </tr>
              <tr>
                <td><code>.multiselect('updateButtonText')</code></td>
                <td>
                  <p>手动选择/取消选择选项和相应的复选框时，此功能将更新按钮的文本和标题。 </p>
                  <p class="alert alert-info"> 请注意，通常仅在使用<code>.multiselect('selectAll', justVisible)</code> 或时才需要此方法 <code>.multiselect('deselectAll', justVisible)</code>。在所有其他情况下， <code>.multiselect('refresh')</code> 应使用。 </p>
                  <div class="code-window">
                    <div class="code-preview">
                      <div class="btn-group">
                        <select id="example-updateButtonText" multiple="multiple">
                          <option value="1">Option 1</option>
                          <option value="2">Option 2</option>
                          <option value="3">Option 3</option>
                          <option value="4">Option 4</option>
                          <option value="5">Option 5</option>
                          <option value="6">Option 6</option>
                        </select>
                        <button id="example-updateButtonText-select" class="btn btn-default">Select some options ...</button>
                        <button id="example-updateButtonText-update" class="btn btn-default">Update</button>
                      </div>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;div class="btn-group"&gt;
  &lt;select id="example-updateButtonText" multiple="multiple"&gt;
    &lt;option value="1"&gt;Option 1&lt;/option&gt;
    &lt;option value="2"&gt;Option 2&lt;/option&gt;
    &lt;option value="3"&gt;Option 3&lt;/option&gt;
    &lt;option value="4"&gt;Option 4&lt;/option&gt;
    &lt;option value="5"&gt;Option 5&lt;/option&gt;
    &lt;option value="6"&gt;Option 6&lt;/option&gt;
  &lt;/select&gt;
  &lt;button id="example-updateButtonText-select" class="btn btn-default"&gt;Select some options ...&lt;/button&gt;
  &lt;button id="example-updateButtonText-update" class="btn btn-default"&gt;Update&lt;/button&gt;
&lt;/div&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-updateButtonText').multiselect({
    buttonContainer: '<div class="btn-group" id="example-updateButtonText-container"></div>'
});
$('#example-updateButtonText-select').on('click', function() {
    $('option[value="1"]', $('#example-updateButtonText')).prop('selected', true);
    $('option[value="3"]', $('#example-updateButtonText')).prop('selected', true);
    $('input[value="1"]', $('#example-updateButtonText-container')).prop('checked', true);
    $('input[value="3"]', $('#example-updateButtonText-container')).prop('checked', true);
    $('input[value="1"]', $('#example-updateButtonText-container')).closest('li').addClass('active');
    $('input[value="3"]', $('#example-updateButtonText-container')).closest('li').addClass('active');
});
$('#example-updateButtonText-update').on('click', function() {
    $('#example-updateButtonText').multiselect('updateButtonText');
});
</code></pre>
                  </div>
                </td>
              </tr>
              <tr>
                <td><code>.multiselect('setOptions', options)</code></td>
                <td>
                  <p>初始化多选后用于更改配置。与结合使用可能很有用<code>.multiselect('rebuild')</code>. </p>
                  <div class="code-window">
                    <div class="code-preview">
                      <div class="btn-group">
                        <button id="example-setOptions-button" class="btn btn-primary">Configuration Set 2</button>
                        <select id="example-setOptions" multiple="multiple">
                          <option value="1">Option 1</option>
                          <option value="2">Option 2</option>
                          <option value="3">Option 3</option>
                          <option value="4">Option 4</option>
                          <option value="5">Option 5</option>
                          <option value="6">Option 6</option>
                        </select>
                      </div>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;div class="btn-group"&gt;
  &lt;button id="example-setOptions-button" class="btn btn-primary"&gt;Configuration Set 2&lt;/button&gt;
  &lt;select id="example-setOptions" multiple="multiple"&gt;
    &lt;option value="1"&gt;Option 1&lt;/option&gt;
    &lt;option value="2"&gt;Option 2&lt;/option&gt;
    &lt;option value="3"&gt;Option 3&lt;/option&gt;
    &lt;option value="4"&gt;Option 4&lt;/option&gt;
    &lt;option value="5"&gt;Option 5&lt;/option&gt;
    &lt;option value="6"&gt;Option 6&lt;/option&gt;
  &lt;/select&gt;
&lt;/div&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">var firstConfigurationSet = {
    includeSelectAllOption: false,
    enableFiltering: false
};
var secondConfigurationSet = {
    includeSelectAllOption: false,
    enableFiltering: true
};

var set = 1;
$('#example-setOptions').multiselect(firstConfigurationSet);

function rebuildMultiselect(options) {
    $('#example-setOptions').multiselect('setOptions', options);
    $('#example-setOptions').multiselect('rebuild');
}

$('#example-setOptions-button').on('click', function(event) {
    switch (set) {
        case 2:
            rebuildMultiselect(firstConfigurationSet);

            $(this).text('Configuration Set 2');
            set = 1;
            break;
        case 1:
        default:
            rebuildMultiselect(secondConfigurationSet);

            $(this).text('Configuration Set 1');
            set = 2;
            break;

    }
});
</code></pre>
                  </div>
                </td>
              </tr>
              <tr>
                <td><code>.multiselect('disable')</code></td>
                <td>
                  <p>禁用基础选择和下拉按钮。 </p>
                  <div class="code-window">
                    <div class="code-preview">
                      <button id="example-disable-button" class="btn btn-primary">Disable...</button>
                      <select id="example-disable" multiple="multiple">
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                        <option value="3">Option 3</option>
                        <option value="4">Option 4</option>
                        <option value="5">Option 5</option>
                        <option value="6">Option 6</option>
                      </select>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;div class="btn-group"&gt;
  &lt;button id="example-disable-button" class="btn btn-primary"&gt;Disable...&lt;/button&gt;
  &lt;select id="example-disable" multiple="multiple"&gt;
    &lt;option value="1"&gt;Option 1&lt;/option&gt;
    &lt;option value="2"&gt;Option 2&lt;/option&gt;
    &lt;option value="3"&gt;Option 3&lt;/option&gt;
    &lt;option value="4"&gt;Option 4&lt;/option&gt;
    &lt;option value="5"&gt;Option 5&lt;/option&gt;
    &lt;option value="6"&gt;Option 6&lt;/option&gt;
  &lt;/select&gt;
&lt;/div&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-disable').multiselect();

$('#example-disable-button').on('click', function() {
    $('#example-disable').multiselect('disable');
});
</code></pre>
                  </div>
                </td>
              </tr>
              <tr>
                <td><code>.multiselect('enable')</code></td>
                <td>
                  <p>同时启用基础选择和下拉按钮。 </p>
                  <div class="code-window">
                    <div class="code-preview">
                      <div class="btn-group">
                        <select id="example-enable" disabled="disabled" multiple="multiple">
                          <option value="1">Option 1</option>
                          <option value="2">Option 2</option>
                          <option value="3">Option 3</option>
                          <option value="4">Option 4</option>
                          <option value="5">Option 5</option>
                          <option value="6">Option 6</option>
                        </select>
                        <button id="example-enable-button" class="btn btn-default">Enable!</button>
                      </div>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;div class="btn-group"&gt;
  &lt;select id="example-enable" disabled="disabled" multiple="multiple"&gt;
    &lt;option value="1"&gt;Option 1&lt;/option&gt;
    &lt;option value="2"&gt;Option 2&lt;/option&gt;
    &lt;option value="3"&gt;Option 3&lt;/option&gt;
    &lt;option value="4"&gt;Option 4&lt;/option&gt;
    &lt;option value="5"&gt;Option 5&lt;/option&gt;
    &lt;option value="6"&gt;Option 6&lt;/option&gt;
  &lt;/select&gt;
  &lt;button id="example-enable-button" class="btn btn-default"&gt;Enable!&lt;/button&gt;
&lt;/div&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-enable').multiselect();

$('#example-enable-button').on('click', function() {
    $('#example-enable').multiselect('enable');
});
</code></pre>
                  </div>
                </td>
              </tr>
              <tr>
                <td><code>.multiselect('dataprovider', data)</code></td>
                <td>
                  <p>此方法用于以编程方式提供选项。请参见下面的示例。 </p>
                  <div class="code-window">
                    <div class="code-preview">
                      <select id="example-dataprovider" multiple="multiple"></select>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id=&quot;example-dataprovider&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-dataprovider').multiselect();
var options = [
    {label: 'Option 1', title: 'Option 1', value: '1', selected: true},
    {label: 'Option 2', title: 'Option 2', value: '2'},
    {label: 'Option 3', title: 'Option 3', value: '3', selected: true},
    {label: 'Option 4', title: 'Option 4', value: '4'},
    {label: 'Option 5', title: 'Option 5', value: '5'},
    {label: 'Option 6', title: 'Option 6', value: '6', disabled: true}
];
$('#example-dataprovider').multiselect('dataprovider', options);
</code></pre>
                  </div>
                  <p>该方法还可以处理<code>optgroup</code>'s:</p>
                  <div class="code-window">
                    <div class="code-preview">
                      <select id="example-dataprovider-optgroups" multiple="multiple"></select>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id=&quot;example-dataprovider-optgroups&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-dataprovider-optgroups').multiselect();

var optgroups = [
    {
        label: 'Group 1', children: [
            {label: 'Option 1.1', value: '1-1', selected: true},
            {label: 'Option 1.2', value: '1-2'},
            {label: 'Option 1.3', value: '1-3'}
        ]
    },
    {
        label: 'Group 2', children: [
            {label: 'Option 2.1', value: '1'},
            {label: 'Option 2.2', value: '2'},
            {label: 'Option 2.3', value: '3', disabled: true}
        ]
    }
];
$('#example-dataprovider-optgroups').multiselect('dataprovider', optgroups);
</code></pre>
                  </div>
                  <p>您可以在选项组子项和未分组的选项上添加自定义数据属性： </p>
                  <div class="code-window">
                    <div class="code-preview">
                      <select id="example-dataprovider-data-attributes" multiple="multiple"></select>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id=&quot;example-dataprovider-data-attributes&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$(&#39;#example-dataprovider-data-attributes&#39;).multiselect();

var optionsData =[
  {
    &quot;label&quot;: &quot;Option 1&quot;,
    &quot;value&quot;: 1,
    &quot;selected&quot;: true,
    &quot;attributes&quot;: {
      &quot;some-attribute&quot;: 1,
      &quot;another-attribute&quot;: false
    }
  },
  {
    &quot;label&quot;: &quot;Option 2&quot;,
    &quot;value&quot;: 2,
    &quot;selected&quot;: false,
    &quot;attributes&quot;: {
      &quot;some-attribute&quot;: 2
    }
  }
];
$(&quot;#example-dataprovider-data-attributes&quot;).multiselect(&#39;dataprovider&#39;, optionsData);
</code></pre>
                  </div>
                  <p>呈现为： </p>
<pre class="line-numbers"><code class="language-html">&lt;option value=&quot;1&quot; label=&quot;Option 1&quot; selected=&quot;selected&quot; data-some-attribute=&quot;1&quot; data-another-attribute=&quot;false&quot;&gt;&lt;/option&gt;
&lt;option value=&quot;2&quot; label=&quot;Option 2&quot; data-some-attribute=&quot;2&quot;&gt;&lt;/option&gt;
</code></pre>
                </td>
              </tr>
              <tr>
                <td><code>.multiselect('setAllSelectedText', value)</code></td>
                <td>
                  <p>当在运行时选择所有选项时，使用此方法以编程方式提供新文本以显示在按钮中。 </p>
                  <div class="code-window">
                    <div class="code-preview">
                      <select id="example-set-all-selected-text" multiple="multiple">
                        <option value="1" selected>Option 1</option>
                      </select>
                      <input id="new-all-selected-text-box" type="text" class="form-control" placeholder="Enter new text" />
                      <input id="new-all-selected-text-btn" type="button" class="btn btn-default" value="Change All Selected Text" />
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-set-all-selected-text" multiple="multiple"&gt;
  &lt;option value="1" selected&gt;Option 1&lt;/option&gt;
&lt;/select&gt;
&lt;input id="new-all-selected-text-box" type="text" class="form-control" placeholder="Enter new text" /&gt;
&lt;input id="new-all-selected-text-btn" type="button" class="btn btn-default" value="Change All Selected Text" /&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-set-all-selected-text').multiselect({allSelectedText: "Initial All Selected"});

$('#new-all-selected-text-btn').click(function(){
    $('#example-set-all-selected-text').multiselect('setAllSelectedText', $('#new-all-selected-text-box').val());
});
</code></pre>
                  </div>
                  <h5><strong>进一步的例子</strong></h5>
                  <p><code>onChange</code> 以下示例 使用配置选项，要求确认是否取消选择一个选项。 </p>
                  <div class="code-window">
                    <div class="code-preview">
                      <select id="example-confirmation" multiple="multiple">
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                        <option value="3">Option 3</option>
                        <option value="4">Option 4</option>
                        <option value="5">Option 5</option>
                        <option value="6">Option 6</option>
                      </select>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-confirmation" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-confirmation').multiselect({
    onChange: function(element, checked) {
        if (checked === true) {
            //action taken here if true
        }
        else if (checked === false) {
            if (confirm('Do you wish to deselect the element?')) {
                //action taken here
            }
            else {
                $("#example-confirmation").multiselect('select', element.val());
            }
        }
    }
});
</code></pre>
                  </div>
                  <p>以上方法也可以适用于 </p>
                  <div class="code-window">
                    <div class="code-preview">
                      <select id="example-confirmation-single">
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                        <option value="3">Option 3</option>
                        <option value="4">Option 4</option>
                        <option value="5">Option 5</option>
                        <option value="6">Option 6</option>
                      </select>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-confirmation-single"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">var lastSelected = $('#example-confirmation-single option:selected').val();
$('#example-confirmation-single').multiselect({
    onChange: function(element, checked) {
        if (confirm('Do you wish to change the selection?')) {
            lastSelected = element.val();
        }
        else {
            $(&quot;#example-confirmation-single&quot;).multiselect('select', lastSelected);
            $(&quot;#example-confirmation-single&quot;).multiselect('deselect', element.val());
        }
    }
});
</code></pre>
                  </div>
                  <p>使用<code>onChange</code>选项限制所选选项的数量。用户最多只能选择4个选项。然后，所有其他选项均被禁用。</p>
                  <div class="code-window">
                    <div class="code-preview">
                      <select id="example-limit" multiple="multiple">
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                        <option value="3">Option 3</option>
                        <option value="4">Option 4</option>
                        <option value="5">Option 5</option>
                        <option value="6">Option 6</option>
                      </select>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-limit" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-limit').multiselect({
    onChange: function(option, checked) {
        // Get selected options.
        var selectedOptions = $('#example-limit option:selected');

        if (selectedOptions.length >= 4) {
            // Disable all other checkboxes.
            var nonSelectedOptions = $('#example-limit option').filter(function() {
                return !$(this).is(':selected');
            });

            nonSelectedOptions.each(function() {
                var input = $('input[value="' + $(this).val() + '"]');
                input.prop('disabled', true);
                input.parent('li').addClass('disabled');
            });
        }
        else {
            // Enable all checkboxes.
            $('#example-limit option').each(function() {
                var input = $('input[value="' + $(this).val() + '"]');
                input.prop('disabled', false);
                input.parent('li').addClass('disabled');
            });
        }
    }
});
</code></pre>
                  </div>
                  <p>记录选择选项的顺序。选择项目时，订购号将增加并保存在该选项内。 </p>
                  <div class="code-window">
                    <div class="code-preview">
                      <div class="btn-group">
                        <button id="example-order-button" class="btn btn-primary">Order</button>
                        <select id="example-order" multiple="multiple">
                          <option value="1">Option 1</option>
                          <option value="2">Option 2</option>
                          <option value="3">Option 3</option>
                          <option value="4">Option 4</option>
                          <option value="5">Option 5</option>
                          <option value="6">Option 6</option>
                        </select>
                      </div>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;div class="btn-group"&gt;
  &lt;button id="example-order-button" class="btn btn-primary"&gt;Order&lt;/button&gt;
  &lt;select id="example-order" multiple="multiple"&gt;
    &lt;option value="1"&gt;Option 1&lt;/option&gt;
    &lt;option value="2"&gt;Option 2&lt;/option&gt;
    &lt;option value="3"&gt;Option 3&lt;/option&gt;
    &lt;option value="4"&gt;Option 4&lt;/option&gt;
    &lt;option value="5"&gt;Option 5&lt;/option&gt;
    &lt;option value="6"&gt;Option 6&lt;/option&gt;
  &lt;/select&gt;
&lt;/div&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">var orderCount = 0;
$('#example-order').multiselect({
    onChange: function(option, checked) {
        if (checked) {
            orderCount++;
            $(option).data('order', orderCount);
        }
        else {
            $(option).data('order', '');
        }
    },
    buttonText: function(options) {
        if (options.length === 0) {
            return 'None selected';
        }
        else if (options.length > 3) {
            return options.length + ' selected';
        }
        else {
            var selected = [];
            options.each(function() {
                selected.push([$(this).text(), $(this).data('order')]);
            });

            selected.sort(function(a, b) {
                return a[1] - b[1];
            });

            var text = '';
            for (var i = 0; i &lt; selected.length; i++) {
                text += selected[i][0] + ', ';
            }

            return text.substr(0, text.length -2);
        }
    },
});

$('#example-order-button').on('click', function() {
    var selected = [];
    $('#example-order option:selected').each(function() {
        selected.push([$(this).val(), $(this).data('order')]);
    });

    selected.sort(function(a, b) {
        return a[1] - b[1];
    });

    var text = '';
    for (var i = 0; i &lt; selected.length; i++) {
        text += selected[i][0] + ', ';
    }
    text = text.substring(0, text.length - 2);

    alert(text);
});
</code></pre>
                  </div>
                  <p>使用复选框模拟单个选择。该行为与带有单选按钮的多选类似，不同之处在于可以再次取消选择所选的选项。 </p>
                  <div class="code-window">
                    <div class="code-preview">
                      <select id="example-simulate-single" multiple="multiple">
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                        <option value="3">Option 3</option>
                        <option value="4">Option 4</option>
                        <option value="5">Option 5</option>
                        <option value="6">Option 6</option>
                      </select>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-simulate-single" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-simulate-single').multiselect({
    onChange: function(option, checked) {
        var values = [];
        $('#example-simulate-single option').each(function() {
            if ($(this).val() !== option.val()) {
                values.push($(this).val());
            }
        });

        $('#example-simulate-single').multiselect('deselect', values);
    }
});
</code></pre>
                  </div>
                  <p>同时使用重置按钮和多重选择。 </p>
                  <div class="code-window">
                    <div class="code-preview">
                      <form class="btn-group" id="example-reset-form">
                        <div class="btn-group">
                          <button type="reset" id="example-reset-button" class="btn btn-default">Reset</button>
                          <select id="example-reset" multiple="multiple">
                            <option value="1">Option 1</option>
                            <option value="2">Option 2</option>
                            <option value="3">Option 3</option>
                            <option value="4">Option 4</option>
                            <option value="5">Option 5</option>
                            <option value="6">Option 6</option>
                          </select>
                        </div>
                      </form>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;form class=&quot;btn-group&quot; id=&quot;example-reset-form&quot;&gt;
    &lt;div class=&quot;btn-group&quot;&gt;
        &lt;button type=&quot;reset&quot; id=&quot;example-reset-button&quot; class=&quot;btn btn-default&quot;&gt;Reset&lt;/button&gt;
        &lt;select id=&quot;example-reset&quot; multiple=&quot;multiple&quot;&gt;
            &lt;option value=&quot;1&quot;&gt;Option 1&lt;/option&gt;
            &lt;option value=&quot;2&quot;&gt;Option 2&lt;/option&gt;
            &lt;option value=&quot;3&quot;&gt;Option 3&lt;/option&gt;
            &lt;option value=&quot;4&quot;&gt;Option 4&lt;/option&gt;
            &lt;option value=&quot;5&quot;&gt;Option 5&lt;/option&gt;
            &lt;option value=&quot;6&quot;&gt;Option 6&lt;/option&gt;
        &lt;/select&gt;
    &lt;/div&gt;
&lt;/form&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-reset').multiselect();
$('#example-reset-form').on('reset', function() {
    $('#example-reset option:selected').each(function() {
        $(this).prop('selected', false);
    })

    $('#example-reset').multiselect('refresh');
});
</code></pre>
                  </div>
                  <p>多选也可用于模态： </p>
                  <div class="code-window">
                    <div class="code-preview">
                      <button class="btn btn-default" data-toggle="modal" data-target="#example-modal-modal">Launch modal</button>
                      <div class="modal fade" id="example-modal-modal">
                        <div class="modal-dialog">
                          <div class="modal-content">
                            <div class="modal-header">
                              <button type="button" class="close" data-dismiss="modal">
                                <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                              </button>
                              <h4 class="modal-title">Bootstrap Multiselect</h4>
                            </div>
                            <div class="modal-body">
                              <select id="example-modal" multiple="multiple">
                                <option value="1">Option 1</option>
                                <option value="2">Option 2</option>
                                <option value="3">Option 3</option>
                                <option value="4">Option 4</option>
                                <option value="5">Option 5</option>
                                <option value="6">Option 6</option>
                              </select>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;button class=&quot;btn btn-default&quot; data-toggle=&quot;modal&quot; data-target=&quot;#example-modal-modal&quot;&gt;Launch modal&lt;/button&gt;
&lt;div class=&quot;modal fade&quot; id=&quot;example-modal-modal&quot;&gt;
    &lt;div class=&quot;modal-dialog&quot;&gt;
        &lt;div class=&quot;modal-content&quot;&gt;
            &lt;div class=&quot;modal-header&quot;&gt;
                &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;&times;&lt;/span&gt;&lt;span class=&quot;sr-only&quot;&gt;Close&lt;/span&gt;&lt;/button&gt;
                &lt;h4 class=&quot;modal-title&quot;&gt;Bootstrap Multiselect&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class=&quot;modal-body&quot;&gt;
                &lt;select id=&quot;example-modal&quot; multiple=&quot;multiple&quot;&gt;
                    &lt;option value=&quot;1&quot;&gt;Option 1&lt;/option&gt;
                    &lt;option value=&quot;2&quot;&gt;Option 2&lt;/option&gt;
                    &lt;option value=&quot;3&quot;&gt;Option 3&lt;/option&gt;
                    &lt;option value=&quot;4&quot;&gt;Option 4&lt;/option&gt;
                    &lt;option value=&quot;5&quot;&gt;Option 5&lt;/option&gt;
                    &lt;option value=&quot;6&quot;&gt;Option 6&lt;/option&gt;
                &lt;/select&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-modal').multiselect();
</code></pre>
                  </div>
                  <p>在手风琴/折叠中使用多重选择的示例： </p>
                  <p class="alert alert-info"> 请注意，<code>.panel</code> 需要看到的溢出： <code>style="overflow:visible;"</code>。请参见下面的示例。 </p>
                  <div class="code-window">
                    <div class="code-preview">
                      <div class="panel-group" id="example-collapse-accordion">
                        <div class="panel panel-default" style="overflow:visible;">
                          <div class="panel-heading">
                            <h4 class="panel-title">
                              <a data-toggle="collapse" data-parent="#example-collapse-accordion" href="#example-collapse-accordion-one">Bootstrap Multiselect</a></h4>
                          </div>
                          <div id="example-collapse-accordion-one" class="panel-collapse collapse in">
                            <div class="panel-body">
                              <select id="example-collapse" multiple="multiple">
                                <option value="1">Option 1</option>
                                <option value="2">Option 2</option>
                                <option value="3">Option 3</option>
                                <option value="4">Option 4</option>
                                <option value="5">Option 5</option>
                                <option value="6">Option 6</option>
                              </select>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;div class=&quot;panel-group&quot; id=&quot;example-collapse-accordion&quot;&gt;
    &lt;div class=&quot;panel panel-default&quot; style=&quot;overflow:visible;&quot;&gt;
        &lt;div class=&quot;panel-heading&quot;&gt;
            &lt;h4 class=&quot;panel-title&quot;&gt;
                &lt;a data-toggle=&quot;collapse&quot; data-parent=&quot;#example-collapse-accordion&quot; href=&quot;#example-collapse-accordion-one&quot;&gt;
                    Bootstrap Multiselect
                &lt;/a&gt;
            &lt;/h4&gt;
        &lt;/div&gt;
        &lt;div id=&quot;example-collapse-accordion-one&quot; class=&quot;panel-collapse collapse in&quot;&gt;
            &lt;div class=&quot;panel-body&quot;&gt;
                &lt;select id=&quot;example-collapse&quot; multiple=&quot;multiple&quot;&gt;
                    &lt;option value=&quot;1&quot;&gt;Option 1&lt;/option&gt;
                    &lt;option value=&quot;2&quot;&gt;Option 2&lt;/option&gt;
                    &lt;option value=&quot;3&quot;&gt;Option 3&lt;/option&gt;
                    &lt;option value=&quot;4&quot;&gt;Option 4&lt;/option&gt;
                    &lt;option value=&quot;5&quot;&gt;Option 5&lt;/option&gt;
                    &lt;option value=&quot;6&quot;&gt;Option 6&lt;/option&gt;
                &lt;/select&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-collapse').multiselect();
</code></pre>
                  </div>
                  <p>以下示例旨在说明使用大量选项时若干功能的性能： </p>
                  <ul>
                    <li>使用全选选项<code>includeSelectAllOption</code> 设置为 <code>true</code>.</li>
                    <li>此外，使用过滤器 <code>enableFiltering</code> 设置为<code>true</code>.</li>
                    <li>另外使用<code>enableClickableOptGroups</code>.</li>
                    <li>重置多选。</li>
                  </ul>
                  <p class="alert alert-warning"> 以下示例需要激活。请注意，这可能需要一些时间！ </p>
                  <div class="code-window">
                    <div class="code-preview">
                      <div class="input-group m-b-10">
                        <div class="input-group-btn">
                          <button type="button" class="btn btn-default" aria-label="Bold">Use</button>
                        </div>
                        <input type="text" class="form-control w-10 pull-left" id="example-large-options" value="1000" />
                        <div class="input-group-btn">
                          <button type="button" class="btn btn-default no-border-lr" aria-label="Bold">options</button>
                        </div>
                        <span class="input-group-btn">
                          <button id="example-large-enable" class="btn btn-primary pull-left">Enable Examples</button>
                        </span>
                      </div>
                      <div class="btn-toolbar" style="margin-bottom:12px;">
                        <div class="btn-group">
                          <select id="example-large-includeSelectAllOption" multiple="multiple">
                            <option value="1">Option 1</option>
                          </select>
                        </div>
                      </div>
                      <div class="btn-toolbar" style="margin-bottom:12px;">
                        <div class="btn-group">
                          <select id="example-large-includeSelectAllOption-enableFiltering" multiple="multiple">
                            <option value="1">Option 1</option>
                          </select>
                        </div>
                      </div>
                      <div class="btn-toolbar" style="margin-bottom:12px;">
                        <div class="btn-group">
                          <select id="example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups" multiple="multiple">
                            <option value="1">Option 1</option>
                          </select>
                        </div>
                      </div>
                      <form id="example-large-reset-form" style="margin-bottom:12px;">
                        <div class="btn-group">
                          <button type="reset" class="btn btn-default">Reset</button>
                          <select id="example-large-reset" multiple="multiple">
                            <option value="1">Option 1</option>
                          </select>
                        </div>
                      </form>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;div class="input-group m-b-10"&gt;
  &lt;div class="input-group-btn"&gt;
    &lt;button type="button" class="btn btn-default" aria-label="Bold"&gt;Use&lt;/button&gt;
  &lt;/div&gt;
  &lt;input type="text" class="form-control w-10 pull-left" id="example-large-options" value="1000" /&gt;
  &lt;div class="input-group-btn"&gt;
    &lt;button type="button" class="btn btn-default no-border-lr" aria-label="Bold"&gt;options&lt;/button&gt;
  &lt;/div&gt;
  &lt;span class="input-group-btn"&gt;
    &lt;button id="example-large-enable" class="btn btn-primary pull-left"&gt;Enable Examples&lt;/button&gt;
  &lt;/span&gt;
&lt;/div&gt;
&lt;div class=&quot;btn-toolbar&quot; style=&quot;margin-bottom:12px;&quot;&gt;
    &lt;div class=&quot;btn-group&quot;&gt;
        &lt;select id=&quot;example-large-includeSelectAllOption&quot; multiple=&quot;multiple&quot;&gt;
            &lt;option value=&quot;1&quot;&gt;Option 1&lt;/option&gt;
        &lt;/select&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;btn-toolbar&quot; style=&quot;margin-bottom:12px;&quot;&gt;
    &lt;div class=&quot;btn-group&quot;&gt;
        &lt;select id=&quot;example-large-includeSelectAllOption-enableFiltering&quot; multiple=&quot;multiple&quot;&gt;
            &lt;option value=&quot;1&quot;&gt;Option 1&lt;/option&gt;
        &lt;/select&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;btn-toolbar&quot; style=&quot;margin-bottom:12px;&quot;&gt;
    &lt;div class=&quot;btn-group&quot;&gt;
        &lt;select id=&quot;example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups&quot; multiple=&quot;multiple&quot;&gt;
            &lt;option value=&quot;1&quot;&gt;Option 1&lt;/option&gt;
        &lt;/select&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;form id=&quot;example-large-reset-form&quot; style=&quot;margin-bottom:12px;&quot;&gt;
    &lt;div class=&quot;btn-group&quot;&gt;
        &lt;button type=&quot;reset&quot; class=&quot;btn btn-default&quot;&gt;Reset&lt;/button&gt;
        &lt;select id=&quot;example-large-reset&quot; multiple=&quot;multiple&quot;&gt;
            &lt;option value=&quot;1&quot;&gt;Option 1&lt;/option&gt;
        &lt;/select&gt;
    &lt;/div&gt;
&lt;/form&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-large-enable').on('click', function() {
    var options = $('#example-large-options').val();

    if (options &lt; 1 || options &gt; 5000) {
        $('#example-large-error').html('&lt;p class=&quot;alert alert-error&quot;&gt;Choose between 1 and 5000 options!&lt;/p&gt;');
    }
    else {
        $('#example-large-includeSelectAllOption').html('');
        $('#example-large-includeSelectAllOption-enableFiltering').html('');
        $('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').html('');
        $('#example-large-reset').html('');

        for (var j = 0; j &lt; options; j++) {
            i = j + 1;
            $('#example-large-includeSelectAllOption').append('&lt;option value=&quot;' + i.toString() + '&quot;&gt;Option ' + i.toString() + '&lt;/option&gt;');
            $('#example-large-includeSelectAllOption-enableFiltering').append('&lt;option value=&quot;' + i.toString() + '&quot;&gt;Option ' + i.toString() + '&lt;/option&gt;');

            var group = Math.floor(j/10) + 1;
            var number = j % 10 + 1;
            if (number === 1) {
                $('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').append('&lt;optgroup label=&quot;Group ' + group.toString() + '&quot;&gt;&lt;/optgroup&gt;');
            }
            $('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').append('&lt;option value=&quot;' + group.toString() + '-' + number.toString() + '&quot;&gt;Option ' + group.toString() + '.' + number.toString() + '&lt;/option&gt;');

            $('#example-large-reset').append('&lt;option value=&quot;' + i.toString() + '&quot;&gt;Option ' + i.toString() + '&lt;/option&gt;');
        }

        $('#example-large-includeSelectAllOption').multiselect({
            maxHeight: 200,
            includeSelectAllOption: true
        });

        $('#example-large-includeSelectAllOption-enableFiltering').multiselect({
            maxHeight: 200,
            includeSelectAllOption: true,
            enableFiltering: true
        });

        $('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').multiselect({
            maxHeight: 200,
            includeSelectAllOption: true,
            enableFiltering: true,
            enableClickableOptGroups: true
        });

        $('#example-large-reset').multiselect({
            maxHeight: 200,
            includeSelectAllOption: true
        });

        $('#example-large-reset-form').on('reset', function() {
            $('#example-large-reset').multiselect('deselectAll', false);
            $('#example-large-reset').multiselect('updateButtonText');
        });
    }
});
</code></pre>
                  </div>
                  <p>以下示例旨在演示<code>.multiselect('dataprovider', data)</code> 大量选项的性能。</p>
                  <p class="alert alert-warning">以下示例需要激活。请注意，这可能需要一些时间！</p>
                  <div class="code-window">
                    <div class="code-preview">
                      <p class="alert alert-info"><button id="example-large-dataprovider-button" class="btn btn-primary">Activate</button></p>
                      <select id="example-large-dataprovider" multiple="multiple"></select>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;p class=&quot;alert alert-info&quot;&gt;&lt;button id=&quot;example-large-dataprovider-button&quot; class=&quot;btn btn-primary&quot;&gt;Activate&lt;/button&gt;&lt;/p&gt;
&lt;select id=&quot;example-large-dataprovider&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">var data = [];
for (var i = 0; i &lt; 100; i++) {
    var group = {label: 'Group ' + (i + 1), children: []};
    for (var j = 0; j &lt; 10; j++) {
        group['children'].push({
            label: 'Option ' + (i + 1) + '.' + (j + 1),
            value: i + '-' + j
        });
    }

    data.push(group);
}

$('#example-large-dataprovider-button').on('click', function() {
    $('#example-large-dataprovider').multiselect({
        maxHeight: 200
    });
    $('#example-large-dataprovider').multiselect('dataprovider', data);
});
</code></pre>
                  </div>
                  <p>下面的示例说明了如何使用JavaScript禁用选项。 </p>
                  <div class="code-window">
                    <div class="code-preview">
                      <div class="btn-group" id="example-disable-javascript-container">
                        <button id="example-disable-javascript-disable" class="btn btn-primary">Disable an option!</button>
                        <button id="example-disable-javascript-check" class="btn btn-primary">Check</button>
                        <select id="example-disable-javascript" multiple="multiple">
                          <option value="1">Option 1</option>
                          <option value="2">Option 2</option>
                          <option value="3">Option 3</option>
                          <option value="4">Option 4</option>
                          <option value="5">Option 5</option>
                          <option value="6">Option 6</option>
                        </select>
                      </div>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;div class="btn-group" id="example-disable-javascript-container"&gt;
  &lt;button id="example-disable-javascript-disable" class="btn btn-primary"&gt;Disable an option!&lt;/button&gt;
  &lt;button id="example-disable-javascript-check" class="btn btn-primary"&gt;Check&lt;/button&gt;
  &lt;select id="example-disable-javascript" multiple="multiple"&gt;
    &lt;option value="1"&gt;Option 1&lt;/option&gt;
    &lt;option value="2"&gt;Option 2&lt;/option&gt;
    &lt;option value="3"&gt;Option 3&lt;/option&gt;
    &lt;option value="4"&gt;Option 4&lt;/option&gt;
    &lt;option value="5"&gt;Option 5&lt;/option&gt;
    &lt;option value="6"&gt;Option 6&lt;/option&gt;
  &lt;/select&gt;
&lt;/div&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-disable-javascript').multiselect({
    includeSelectAllOption: true
});
$('#example-disable-javascript-disable').on('click', function() {
    var input = $('#example-disable-javascript-container input[value="3"]');
    var option = $('#example-disable-javascript-container option[value="3"]');
    input.prop('disabled', true);
    option.prop('disabled', true);
    input.parent('label').parent('a').parent('li').addClass('disabled');
});
$('#example-disable-javascript-check').on('click', function() {
    var options = '';
    $('#example-disable-javascript option:selected').each(function() {
        options += $(this).val() + ', ';
    });
    alert(options.substr(0, options.length - 2));
});
</code></pre>
                  </div>
                  <p><code>.multiselect('refresh')</code> 与大量选项一起 使用的性能示例： </p>
                  <p class="alert alert-warning">以下示例需要激活。请注意，这可能需要一些时间！</p>
                  <div class="code-window">
                    <div class="code-preview">
                      <p class="alert alert-info"><button id="example-large-refresh-button" class="btn btn-primary">Activate</button></p>
                      <div class="btn-group">
                        <select id="example-large-refresh" multiple="multiple"></select>
                        <button id="example-large-refresh-select" class="btn btn-default">Select every second option ...</button>
                        <button id="example-large-refresh-refresh" class="btn btn-primary">Refresh!</button>
                      </div>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;div class="btn-group"&gt;
  &lt;select id="example-large-refresh" multiple="multiple"&gt;&lt;/select&gt;
  &lt;button id="example-large-refresh-select" class="btn btn-default"&gt;Select every second option ...&lt;/button&gt;
  &lt;button id="example-large-refresh-refresh" class="btn btn-primary"&gt;Refresh!&lt;/button&gt;
&lt;/div&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-large-refresh-button').on('click', function() {
    for (var i = 0; i &lt; 1000; i++) {
        $('#example-large-refresh').append('&lt;option value=&quot;' + i + '&quot;&gt;Option ' + i + '&lt;/option&gt;');
    }

    $('#example-large-refresh').multiselect();
});

$('#example-large-refresh-refresh').on('click', function() {
    $('#example-large-refresh').multiselect('refresh');
});

$('#example-large-refresh-select').on('click', function() {
    var count = 0;

    $('#example-large-refresh option').each(function() {
        var i = $(this).val();

        if (i%2 == 0) {
            $(this).prop('selected', true);
            count++;
        }

    });

    alert('Selected ' + count + ' options!');
});
</code></pre>
                  </div>
                  <p>下面的示例演示如何限制特定选项的选择数量<code>optgroup</code>:</p>
                  <div class="code-window">
                    <div class="code-preview">
                      <select id="example-optgroup-limit" multiple="multiple">
                        <optgroup class="group-1" label="Group 1">
                          <option value="1-1">Option 1.1</option>
                          <option value="1-2">Option 1.2</option>
                          <option value="1-3">Option 1.3</option>
                        </optgroup>
                        <optgroup class="group-2" label="Group 2">
                          <option value="2-1">Option 2.1</option>
                          <option value="2-2">Option 2.2</option>
                          <option value="2-3">Option 2.3</option>
                        </optgroup>
                      </select>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id=&quot;example-optgroup-limit&quot; multiple=&quot;multiple&quot;&gt;
    &lt;optgroup class=&quot;group-1&quot; label=&quot;Group 1&quot;&gt;
        &lt;option value=&quot;1-1&quot;&gt;Option 1.1&lt;/option&gt;
        &lt;option value=&quot;1-2&quot;&gt;Option 1.2&lt;/option&gt;
        &lt;option value=&quot;1-3&quot;&gt;Option 1.3&lt;/option&gt;
    &lt;/optgroup&gt;
    &lt;optgroup class=&quot;group-2&quot; label=&quot;Group 2&quot;&gt;
        &lt;option value=&quot;2-1&quot;&gt;Option 2.1&lt;/option&gt;
        &lt;option value=&quot;2-2&quot;&gt;Option 2.2&lt;/option&gt;
        &lt;option value=&quot;2-3&quot;&gt;Option 2.3&lt;/option&gt;
    &lt;/optgroup&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-optgroup-limit').multiselect({
    onChange: function(options, checked) {
        var $option = $(options);
        if ($option.length == 1) {

            var $group = $option.parent('optgroup')
            if ($group.hasClass('group-1')) {
                var $options = $('option', $group);
                $options = $options.filter(':selected');

                if (checked && $options.length &gt; 2) {
                    alert('Cannot select more than 2 elements in this group!');
                    $(&quot;#example-optgroup-limit&quot;).multiselect('deselect', $option.val());
                }
            }
        }
    }
});
</code></pre>
                  </div>
                  <p>以下示例演示了<code>optgroup</code>如果 <code>option</code>选择了该组中的所有，则如何显示的标签： </p>
                  <div class="code-window">
                    <div class="code-preview">
                      <select id="example-optgroup-buttonText" multiple="multiple">
                        <optgroup class="group-1" label="Group 1">
                          <option value="1-1">Option 1.1</option>
                          <option value="1-2">Option 1.2</option>
                          <option value="1-3">Option 1.3</option>
                        </optgroup>
                        <optgroup class="group-2" label="Group 2">
                          <option value="2-1">Option 2.1</option>
                          <option value="2-2">Option 2.2</option>
                          <option value="2-3">Option 2.3</option>
                        </optgroup>
                      </select>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id=&quot;example-optgroup-buttonText&quot; multiple=&quot;multiple&quot;&gt;
    &lt;optgroup class=&quot;group-1&quot; label=&quot;Group 1&quot;&gt;
        &lt;option value=&quot;1-1&quot;&gt;Option 1.1&lt;/option&gt;
        &lt;option value=&quot;1-2&quot;&gt;Option 1.2&lt;/option&gt;
        &lt;option value=&quot;1-3&quot;&gt;Option 1.3&lt;/option&gt;
    &lt;/optgroup&gt;
    &lt;optgroup class=&quot;group-2&quot; label=&quot;Group 2&quot;&gt;
        &lt;option value=&quot;2-1&quot;&gt;Option 2.1&lt;/option&gt;
        &lt;option value=&quot;2-2&quot;&gt;Option 2.2&lt;/option&gt;
        &lt;option value=&quot;2-3&quot;&gt;Option 2.3&lt;/option&gt;
    &lt;/optgroup&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-optgroup-buttonText').multiselect({
    buttonText: function(options, select) {

        // First consider the simple cases, i.e. disabled and empty.
        if (this.disabledText.length &gt; 0
                && (this.disableIfEmpty || select.prop('disabled'))
                && options.length == 0) {

            return this.disabledText;
        }
        else if (options.length === 0) {
            return this.nonSelectedText;
        }

        var $select = $(select);
        var $optgroups = $('optgroup', $select);

        var delimiter = this.delimiterText;
        var text = '';

        // Go through groups.
        $optgroups.each(function() {
            var $selectedOptions = $('option:selected', this);
            var $options = $('option', this);

            if ($selectedOptions.length == $options.length) {
                text += $(this).attr('label') + delimiter;
            }
            else {
                $selectedOptions.each(function() {
                    text += $(this).text() + delimiter;
                });
            }
        });

        var $remainingOptions = $('option:selected', $select).not('optgroup option');
        $remainingOptions.each(function() {
            text += $(this).text() + delimiter;
        });

        return text.substr(0, text.length - 2);
    }
});
</code></pre>
                  </div>
                  <p>以下示例演示了如何设置<code>li.active</code>的父元素类：</p>
                  <div class="code-window">
                    <div class="code-preview">
                      <select id="example-selected-parents" multiple="multiple">
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                        <option value="3">Option 3</option>
                        <option value="4">Option 4</option>
                        <option value="5">Option 5</option>
                        <option value="6">Option 6</option>
                      </select>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id=&quot;example-selected-parents&quot; multiple=&quot;multiple&quot;&gt;
    &lt;option value=&quot;1&quot;&gt;Option 1&lt;/option&gt;
    &lt;option value=&quot;2&quot;&gt;Option 2&lt;/option&gt;
    &lt;option value=&quot;3&quot;&gt;Option 3&lt;/option&gt;
    &lt;option value=&quot;4&quot;&gt;Option 4&lt;/option&gt;
    &lt;option value=&quot;5&quot;&gt;Option 5&lt;/option&gt;
    &lt;option value=&quot;6&quot;&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                    
<pre class="line-numbers"><code class="language-css">#example-selected-parents-container label.active {
    font-weight: bold;
}
</code></pre>

<pre class="line-numbers"><code class="language-javascript">$('#example-selected-parents').multiselect({
    buttonContainer: '&lt;div id=&quot;example-selected-parents-container&quot; class=&quot;btn-group&quot;&gt;&lt;/div&gt;',
    onChange: function(options, selected) {
        // Get checkbox corresponding to option:
        var value = $(options).val();
        var $input = $('#example-selected-parents-container input[value=&quot;' + value + '&quot;]');

        // Adapt label class:
        if (selected) {
            $input.closest('label').addClass('active');
        }
        else {
            $input.closest('label').removeClass('active');
        }
    }
});
</code></pre>
                  </div>
                  <p>下面的示例演示了使用过滤器后，一旦选择了选项，便如何清除过滤。请注意，选择和取消选择选项时，都会清除过滤器。 </p>
                  <div class="code-window">
                    <div class="code-preview">
                      <div class="btn-group">
                        <select id="example-clear-after-filter-selection" multiple="multiple">
                          <option value="1">Option 1</option>
                          <option value="2">Option 2</option>
                          <option value="3">Option 3</option>
                          <option value="4">Option 4</option>
                          <option value="5">Option 5</option>
                          <option value="6">Option 6</option>
                        </select>
                      </div>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-clear-after-filter-selection" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-clear-after-filter-selection').multiselect({
    buttonContainer: '&lt;div id=&quot;example-clear-after-filter-selection-container&quot; class=&quot;btn-group&quot;&gt;&lt;/div&gt;',
    enableFiltering: true,
    onChange: function($option) {
        // Check if the filter was used.
        var query = $('#example-clear-after-filter-selection-container li.multiselect-filter input').val();

        if (query) {
            $('#example-clear-after-filter-selection-container li.multiselect-filter input').val('').trigger('keydown');
        }
    }
});
</code></pre>
                  </div>
                  <p><code>.dropUp</code> 如果元素位于窗口的下边缘， 要自动添加类，请使用以下代码段： </p>
                  <div class="code-window">
                    <div class="code-preview">
                      <select id="example-automatic-dropup" multiple="multiple">
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                        <option value="3">Option 3</option>
                        <option value="4">Option 4</option>
                        <option value="5">Option 5</option>
                        <option value="6">Option 6</option>
                      </select>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-automatic-dropup" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-clear-after-filter-selection').multiselect({
    buttonContainer: '&lt;div id=&quot;example-clear-after-filter-selection-container&quot; class=&quot;btn-group&quot;&gt;&lt;/div&gt;',
    enableFiltering: true,
    onChange: function($option) {
        // Check if the filter was used.
        var query = $('#example-clear-after-filter-selection-container li.multiselect-filter input').val();

        if (query) {
            $('#example-clear-after-filter-selection-container li.multiselect-filter input').val('').trigger('keydown');
        }
    }
});
</code></pre>
                  </div>
                  <p>以下示例演示如何显示不带下拉列表的复选框列表：</p>
                  <div class="code-window">
                    <div class="code-preview">
                      <select id="example-checkbox-list" multiple="multiple">
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                        <option value="3">Option 3</option>
                        <option value="4">Option 4</option>
                        <option value="5">Option 5</option>
                        <option value="6">Option 6</option>
                      </select>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;select id="example-checkbox-list" multiple="multiple"&gt;
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
  &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;option value="4"&gt;Option 4&lt;/option&gt;
  &lt;option value="5"&gt;Option 5&lt;/option&gt;
  &lt;option value="6"&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                    
<pre class="line-numbers"><code class="language-css">#example-checkbox-list-container .checkbox-list &gt; li &gt; a {
    display: block;
    padding: 3px 0;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

#example-checkbox-list-container .checkbox-list &gt; li &gt; a:hover,
#example-checkbox-list-container .checkbox-list &gt; li &gt; a:focus {
    color: #333;
    text-decoration: none;
    background-color: transparent;
}

#example-checkbox-list-container .checkbox-list &gt; .active &gt; a,
#example-checkbox-list-container .checkbox-list &gt; .active &gt; a:hover,
#example-checkbox-list-container .checkbox-list &gt; .active &gt; a:focus {
    color: #333;
    text-decoration: none;
    background-color: transparent;
    outline: 0;
}

#example-checkbox-list-container .checkbox-list &gt; .disabled &gt; a,
#example-checkbox-list-container .checkbox-list &gt; .disabled &gt; a:hover,
#example-checkbox-list-container .checkbox-list &gt; .disabled &gt; a:focus {
    color: #777;
}

#example-checkbox-list-container .checkbox-list &gt; .disabled &gt; a:hover,
#example-checkbox-list-container .checkbox-list &gt; .disabled &gt; a:focus {
    text-decoration: none;
    cursor: unset;
    background-color: transparent;
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

#example-checkbox-list-container .checkbox-list &gt; li &gt; a &gt; label {
    padding: 3px 0 3px 20px;
}

@media (min-width: 768px) {
    #example-checkbox-list-container .checkbox-list &gt; li {
        float: left;
        width: 33%;
    }
    #example-checkbox-list-container .checkbox-list-vertical &gt; li {
        float: none;
        width: 100%;
    }
}

#example-checkbox-list-container .multiselect-container.checkbox-list {
    position: static;
}
</code></pre>
             
<pre class="line-numbers"><code class="language-javascript">$('#example-checkbox-list').multiselect({
    buttonContainer: '&lt;div id=&quot;example-checkbox-list-container&quot; class=&quot;btn-group&quot;&gt;&lt;/div&gt;',
    buttonClass: '',
    templates: {
        button: '',
        ul: '&lt;ul class=&quot;multiselect-container checkbox-list&quot;&gt;&lt;/ul&gt;',
    }
});
</code></pre>
                  </div>
                  <h5><strong>服务器端处理</strong></h5>
                  <p class="alert alert-warning"> 下面的示例使用PHP脚本演示服务器端处理。因此，以下示例将不会在线运行- 下载资源库并在本地服务器上尝试。 </p>
                  <p>为了在提交表单后接收正确的数据，使用者<code>select</code> 必须具有适当的名称。请注意，<code>[]</code>使用<code>multiple</code>选项/属性时，需要在名称后附加一个。默认情况下，不会提交多选框内使用的复选框，但是可以通过修改来更改<code>checkboxName</code>。全选选项以及用于过滤器的文本输入将不会提交。由于这可能很有用，因此可以使用该<code>selectAllName</code>选项来调整“全选” 复选框的名称。“全选”复选框的值可以由该<code>selectAllValue</code>选项控制，而其余复选框的值则<code>option</code>与原始文档的所使用的值相对应<code>select</code>. </p>
                  <p class="alert alert-info"> 该插件自然支持该<code>required</code> 属性。</p>
                  <div class="code-window">
                    <div class="code-preview">
                      <form class="form-horizontal" method="POST" action="post.php">
                        <div class="form-group">
                          <label class="col-sm-2 control-label">Multiselect</label>
                          <div class="col-sm-10">
                            <select id="example-post" name="multiselect[]" multiple="multiple" required>
                              <option value="1">Option 1</option>
                              <option value="2">Option 2</option>
                              <option value="3">Option 3</option>
                              <option value="4">Option 4</option>
                              <option value="5">Option 5</option>
                              <option value="6">Option 6</option>
                            </select>
                          </div>
                        </div>
                        <div class="form-group">
                          <label class="col-sm-2 control-label">Text Input</label>
                          <div class="col-sm-10">
                            <input type="text" name="text" class="form-control" placeholder="Text Input" /></div>
                        </div>
                        <div class="form-group">
                          <div class="col-sm-offset-2 col-sm-10">
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" name="checkbox">Checkbox</label></div>
                          </div>
                        </div>
                        <div class="form-group">
                          <div class="col-sm-offset-2 col-sm-10">
                            <div class="radio">
                              <label>
                                <input type="radio" name="radio">Radio 1</label></div>
                            <div class="radio">
                              <label>
                                <input type="radio" name="radio">Radio 2</label></div>
                          </div>
                        </div>
                        <div class="form-group">
                          <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-default">Submit</button></div>
                        </div>
                      </form>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;form class=&quot;form-horizontal&quot; method=&quot;POST&quot; action=&quot;post.php&quot;&gt;
    &lt;div class=&quot;form-group&quot;&gt;
        &lt;label class=&quot;col-sm-2 control-label&quot;&gt;Multiselect&lt;/label&gt;
        &lt;div class=&quot;col-sm-10&quot;&gt;
            &lt;select id=&quot;example-post&quot; name=&quot;multiselect[]&quot; multiple=&quot;multiple&quot;&gt;
                &lt;option value=&quot;1&quot;&gt;Option 1&lt;/option&gt;
                &lt;option value=&quot;2&quot;&gt;Option 2&lt;/option&gt;
                &lt;option value=&quot;3&quot;&gt;Option 3&lt;/option&gt;
                &lt;option value=&quot;4&quot;&gt;Option 4&lt;/option&gt;
                &lt;option value=&quot;5&quot;&gt;Option 5&lt;/option&gt;
                &lt;option value=&quot;6&quot;&gt;Option 6&lt;/option&gt;
            &lt;/select&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group&quot;&gt;
        &lt;label class=&quot;col-sm-2 control-label&quot;&gt;Text Input&lt;/label&gt;
        &lt;div class=&quot;col-sm-10&quot;&gt;
            &lt;input type=&quot;text&quot; name=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Text Input&quot; /&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group&quot;&gt;
        &lt;div class=&quot;col-sm-offset-2 col-sm-10&quot;&gt;
            &lt;div class=&quot;checkbox&quot;&gt;
                &lt;label&gt;
                    &lt;input type=&quot;checkbox&quot; name=&quot;checkbox&quot;&gt; Checkbox
                &lt;/label&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group&quot;&gt;
        &lt;div class=&quot;col-sm-offset-2 col-sm-10&quot;&gt;
            &lt;div class=&quot;radio&quot;&gt;
                &lt;label&gt;
                    &lt;input type=&quot;radio&quot; name=&quot;radio&quot;&gt; Radio 1
                &lt;/label&gt;
            &lt;/div&gt;
            &lt;div class=&quot;radio&quot;&gt;
                &lt;label&gt;
                    &lt;input type=&quot;radio&quot; name=&quot;radio&quot;&gt; Radio 2
                &lt;/label&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group&quot;&gt;
        &lt;div class=&quot;col-sm-offset-2 col-sm-10&quot;&gt;
            &lt;button type=&quot;submit&quot; class=&quot;btn btn-default&quot;&gt;Submit&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/form&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-post').multiselect({
    includeSelectAllOption: true,
    enableFiltering: true
});
</code></pre>
                  </div>
                  <p><code>checkboxName</code>选项还可以用于为分配不同的名称<code>option's</code>，例如，用于<code>optgroup</code>s. </p>
                  <p class="alert alert-warning"> 请注意，在下面的示例中，<code>$_POST</code> 将同时包含<code>multiselect</code> 和 <code>group1</code> 以及 <code>group2</code> 键。 </p>
                  <div class="code-window">
                    <div class="code-preview">
                      <form class="form-horizontal" method="POST" action="post.php">
                        <div class="form-group">
                          <label class="col-sm-2 control-label">Multiselect</label>
                          <div class="col-sm-10">
                            <select id="example-post-checkboxName" name="multiselect[]" multiple="multiple" required>
                              <optgroup label="Group 1" id="example-post-checkboxName-1">
                                <option value="1-1">Option 1.1</option>
                                <option value="1-2">Option 1.2</option>
                                <option value="1-3">Option 1.3</option>
                              </optgroup>
                              <optgroup label="Group 1" id="example-post-checkboxName-2">
                                <option value="2-1">Option 2.1</option>
                                <option value="2-2">Option 2.2</option>
                                <option value="2-3">Option 2.3</option>
                              </optgroup>
                            </select>
                          </div>
                        </div>
                        <div class="form-group">
                          <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-default">Submit</button>
                          </div>
                        </div>
                      </form>
                    </div>
                
<pre class="line-numbers"><code class="language-html">&lt;form class=&quot;form-horizontal&quot; method=&quot;POST&quot; action=&quot;post.php&quot;&gt;
    &lt;div class=&quot;form-group&quot;&gt;
        &lt;label class=&quot;col-sm-2 control-label&quot;&gt;Multiselect&lt;/label&gt;
        &lt;div class=&quot;col-sm-10&quot;&gt;
            &lt;select id=&quot;example-post-checkboxName&quot; name=&quot;multiselect[]&quot; multiple=&quot;multiple&quot; required&gt;
                &lt;optgroup label=&quot;Group 1&quot; id=&quot;example-post-checkboxName-1&quot;&gt;
                    &lt;option value=&quot;1-1&quot;&gt;Option 1.1&lt;/option&gt;
                    &lt;option value=&quot;1-2&quot;&gt;Option 1.2&lt;/option&gt;
                    &lt;option value=&quot;1-3&quot;&gt;Option 1.3&lt;/option&gt;
                &lt;/optgroup&gt;
                &lt;optgroup label=&quot;Group 1&quot; id=&quot;example-post-checkboxName-2&quot;&gt;
                    &lt;option value=&quot;2-1&quot;&gt;Option 2.1&lt;/option&gt;
                    &lt;option value=&quot;2-2&quot;&gt;Option 2.2&lt;/option&gt;
                    &lt;option value=&quot;2-3&quot;&gt;Option 2.3&lt;/option&gt;
                &lt;/optgroup&gt;
            &lt;/select&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group&quot;&gt;
        &lt;div class=&quot;col-sm-offset-2 col-sm-10&quot;&gt;
            &lt;button type=&quot;submit&quot; class=&quot;btn btn-default&quot;&gt;Submit&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/form&gt;
</code></pre>
                  
<pre class="line-numbers"><code class="language-javascript">$('#example-post-checkboxName').multiselect({
    checkboxName: function(option) {
        var $optgroup = $(option).closest('optgroup');
        if ($optgroup.id == 'example-post-checkboxName-1') {
            return 'group1[]';
        }
        else {
            return 'group2[]';
        }
    }
});
</code></pre>
                  </div>
                  <h5><strong>键盘支持</strong></h5>
                  <table class="table table-bordered table-striped">
                    <tbody>
                      <tr>
                        <td><code>Tab</code></td>
                        <td>与其他表单元素一样， <code>Tab</code>用于切换到下一个表单元素。<code>Tab</code>可在下拉菜单打开或关闭时使用。</td>
                      </tr>
                      <tr>
                        <td><code>Enter</code></td>
                        <td><code>Enter</code> 用于打开下拉菜单并选择选项（对于选择选项，<code>Space</code>也可以使用）。选中多项选择后，按<code>Enter</code> 将打开下拉列表。然后，可以使用向上和向下箭头遍历选项。</td>
                      </tr>
                      <tr>
                        <td><code>Arrow Up/Arrow Down</code></td>
                        <td>打开下拉列表后用于遍历选项。可以使用 <code>Space</code> 或选择一个选项 <code>Enter</code>.</td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
          
        </div>
      </div>
    </div>
    
  </div>
  
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/prism.min.js"></script><!--该JS是示例中的运行和代码展示，使用Multiselect无需引入-->
<script type="text/javascript" src="js/runexample/runexample.min.js"></script><!--该JS是示例中的运行和代码展示，使用Multiselect无需引入-->
<script type="text/javascript" src="js/bootstrap-multiselect/bootstrap-multiselect.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    // 默认示例
    $('#example-getting-started').multiselect();
    
    // 第一个示例 单选
    $('#example-single').multiselect();
    // 第二个示例 已选中的单选
    $('#example-single-selected').multiselect();
    // 第三个示例 多选
    $('#example-multiple-selected').multiselect();
    // 第四个示例 分组
    $('#example-multiple-optgroups').multiselect();
    // 第五个示例 optgroups
    $('#example-multiple-optgroups-classes').multiselect();
    // 第六个示例 xss
    $('#example-xss').multiselect();
    // 第七个示例 html标签
    $('#example-xss-html').multiselect({
        nonSelectedText:'<span style="color:red;">Non selected ...</span>',
        enableHTML:true
    });
    // 第八个示例 optgroup可点击
    $('#example-enableClickableOptGroups').multiselect({
        enableClickableOptGroups: true
    });
    // 第九个示例 禁用选项一起使用
    $('#example-enableClickableOptGroups-disabled').multiselect({
        enableClickableOptGroups: true
    });
    // 第十个示例 增加onChange
    $('#example-enableClickableOptGroups-onChange').multiselect({
        enableClickableOptGroups: true,
        onChange: function(option, checked) {
            alert(option.length + ' options ' + (checked ? 'selected' : 'deselected'));
        }
    });
    // 第十一个示例 默认选中组
    $('#example-enableClickableOptGroups-init').multiselect({
        enableClickableOptGroups: true
    });
    // 第十二个示例 可折叠的分组
    $('#example-enableCollapsibleOptGroups').multiselect({
        enableCollapsibleOptGroups: true
    });  
    // 第十三个示例 enableClickableOptGroups和enableCollapsibleOptGroups两项结合
    $('#example-enableCollapsibleOptGroups-enableClickableOptGroups').multiselect({
        enableClickableOptGroups: true,
        enableCollapsibleOptGroups: true
    });
    // 第十四个示例 默认折叠
    $('#example-enableCollapsibleOptGroups-collapsed').multiselect({
        enableCollapsibleOptGroups: true,
        buttonContainer: '<div id="example-enableCollapsibleOptGroups-collapsed-container" class="btn-group" />'
    });
    $('#example-enableCollapsibleOptGroups-collapsed-container .caret-container').click();
    // 第十五个示例 enableFiltering 和结合 includeSelectAllOption
    $('#example-enableCollapsibleOptGroups-enableClickableOptGroups-enableFiltering-includeSelectAllOption').multiselect({
        enableClickableOptGroups: true,
        enableCollapsibleOptGroups: true,
        enableFiltering: true,
        includeSelectAllOption: true
    });
    // 第十六个示例 collapseOptGroupsByDefault
    $('#example-collapseOptGroupsByDefault').multiselect({
        enableCollapsibleOptGroups: true,
        collapseOptGroupsByDefault: true
    });
    // 第十七个示例 disableIfEmpty
    $('#example-disableIfEmpty').multiselect({
        disableIfEmpty: true
    });
    // 第十八个示例 disabledText
    $('#example-disabledText').multiselect({
        disableIfEmpty: true,
        disabledText: 'Disabled ...'
    });
    // 第十九个示例
    $('#example-disabledText-disabled').multiselect({
        disabledText: 'Disabled ...'
    });
    // 第二十个示例
    $('#example-disabledText-disabled-selected').multiselect({
        disabledText: 'Disabled ...'
    });
    // 第二十一示例 dropRight
    $('#example-dropRight').multiselect({
        buttonWidth: '400px',
        dropRight: true
    });
    // 第二十二示例 dropUp
    $('#example-dropUp').multiselect({
        enableFiltering: true,
        includeSelectAllOption: true,
        maxHeight: 400,
        dropUp: true
    });
    // 第二十三示例 maxHeight
    $('#example-without-maxHeight').multiselect();
    $('#example-with-maxHeight').multiselect({
        maxHeight: 200
    });
    // 第二十四示例 checkboxName
    $('#example-checkboxName').multiselect({
        checkboxName: function(option) {
            return 'multiselect[]';
        }
    });
    // 第二十五示例 onChange
    $('#example-onChange').multiselect({
        onChange: function(option, checked, select) {
            alert('Changed option ' + $(option).val() + '.');
        }
    });
    // 第二十六示例 onInitialized
    $('#example-onInitialized-button').on('click', function() {
        $('#example-onInitialized').multiselect({
            onInitialized: function(select, container) {
                alert('Initialized.');
            }
        });
    });
    // 第二十七示例 onDropdownShow
    $('#example-onDropdownShow').multiselect({
        onDropdownShow: function(event) {
            alert('Dropdown shown.');
        }
    });
    // 第二十八示例 onDropdownHide
    $('#example-onDropdownHide').multiselect({
        onDropdownHide: function(event) {
            alert('Dropdown closed.');
        }
    });
    // 第二十九示例 onDropdownShown
    $('#example-onDropdownShown').multiselect({
        onDropdownShown: function(event) {
            alert('Dropdown closed.');
        }
    });
    // 第三十示例 onDropdownHidden
    $('#example-onDropdownHidden').multiselect({
        onDropdownHidden: function(event) {
            alert('Dropdown closed.');
        }
    });
    // 第三十一示例buttonClass
    $('#example-buttonClass').multiselect({
        buttonClass: 'btn btn-link'
    });
    // 第三十二示例 inheritClass
    $('#example-inheritButton').multiselect({
        inheritClass: true
    });
    // 第三十三示例 buttonContainer
    $('#example-buttonContainer').multiselect({
        buttonContainer: '<div class="btn-group" />'
    });
    // 第三十四示例 buttonWidth
    $('#example-buttonWidth').multiselect({
        buttonWidth: '400px'
    });
    // 第三十五示例 buttonWidth
    $('#example-buttonWidth-overflow').multiselect({
        buttonWidth: '150px'
    });
    // 第三十六示例 buttonWidth
    $('#example-buttonWidth-overflow-option').multiselect({
        buttonWidth: '150px'
    });
    // 第三十七示例 buttonText
    $('#example-buttonText').multiselect({
        buttonText: function(options, select) {
            if (options.length === 0) {
                return 'No option selected ...';
            }
            else if (options.length > 3) {
                return 'More than 3 options selected!';
            }
             else {
                 var labels = [];
                 options.each(function() {
                     if ($(this).attr('label') !== undefined) {
                         labels.push($(this).attr('label'));
                     }
                     else {
                         labels.push($(this).html());
                     }
                 });
                 return labels.join(', ') + '';
             }
        }
    });
    // 第三十八示例 buttonTitle
    $('#example-buttonTitle').multiselect({
        buttonText: function(options, select) {
            return 'Check the title!';
        },
        buttonTitle: function(options, select) {
            var labels = [];
            options.each(function () {
                labels.push($(this).text());
            });
            return labels.join(' - ');
        }
    });
    // 第三十九示例 nonSelectedText
    $('#example-nonSelectedText').multiselect({
        nonSelectedText: 'Check an option!'
    });
    // 第四十示例 nSelectedText
    $('#example-nSelectedText').multiselect({
        nSelectedText: ' - Too many options selected!'
    });
    // 第四十一示例 allSelectedText
    $('#example-allSelectedText').multiselect({
        allSelectedText: 'No option left ...'
    });
    // 第四十二示例 includeSelectAllOption
    $('#example-allSelectedText-includeSelectAllOption').multiselect({
        includeSelectAllOption: true,
        allSelectedText: 'No option left ...'
    });
    // 第四十三示例 
    $('#example-allSelectedText-allSelectedText-single').multiselect({
        includeSelectAllOption: true,
        allSelectedText: 'No option left ...'
    });
    // 第四十四示例 numberDisplayed
    $('#example-numberDisplayed').multiselect({
        numberDisplayed: 1
    });
    // 第四十五示例 delimiterText
    $('#example-delimiterText').multiselect({
        delimiterText:'; '
    });
    // 第四十六示例 optionLabel
    $('#example-optionLabel').multiselect({
        optionLabel: function(element) {
            return $(element).html() + '(' + $(element).val() + ')';
        }
    });
    // 第四十七示例 optionClass
    $('#example-optionClass').multiselect({
        optionClass: function(element) {
            var value = $(element).val();
 
            if (value%2 == 0) {
                return 'even';
            }
            else {
                return 'odd';
            }
        }
    });
    // 第四十八示例 selectedClass
    $('#example-selectedClass').multiselect({
        buttonContainer: '<div class="btn-group" id="example-selectedClass-container"></div>',
        selectedClass: 'multiselect-selected'
    });
    // 第四十九示例 includeSelectAllOption
    $('#example-includeSelectAllOption').multiselect({
        includeSelectAllOption: true
    });
    // 第五十示例 includeSelectAllOption
    $('#example-includeSelectAllOption-optgroups').multiselect({
        includeSelectAllOption: true
    });
    // 第五十一示例 includeSelectAllOption
    $('#example-includeSelectAllOption-onChange').multiselect({
        includeSelectAllOption: true,
        onChange: function(option, checked) {
            alert('Not triggered when clicking the select all!');
        },
    });
    // 第五十二示例 includeSelectAllOption
    $('#example-includeSelectAllOption-disbled').multiselect({
        includeSelectAllOption: true
    });
    // 第五十三示例 selectAllJustVisible
    $('#example-selectAllJustVisible').multiselect({
        enableFiltering: true,
        includeSelectAllOption: true,
        selectAllJustVisible: false
    });
    // 第五十四示例 
    $('#example-selectAllText').multiselect({
        includeSelectAllOption: true,
        selectAllText: 'Check all!'
    });
    // 第五十五示例 selectAllValue
    $('#example-selectAllValue').multiselect({
        includeSelectAllOption: true,
        selectAllValue: 'select-all-value'
    });
    // 第五十六示例 selectAllValue
    $('#example-selectAllValue-numeric').multiselect({
        includeSelectAllOption: true,
 
        selectAllValue: 0
    });
    // 第五十七示例 selectAllName
    $('#example-selectAllName').multiselect({
        includeSelectAllOption: true,
        selectAllName: 'select-all-name'
    });
    // 第五十八示例 selectAllNumber
    $('#example-selectAllNumber').multiselect({
        includeSelectAllOption: true,
        selectAllNumber: false
    });
    // 第五十九示例 onSelectAll
    $('#example-onSelectAll').multiselect({
        includeSelectAllOption: true,
        onSelectAll: function() {
            alert('onSelectAll triggered!');
        }
    });
    // 第六十示例 onDeselectAll
    $('#example-onDeselectAll').multiselect({
        includeSelectAllOption: true,
        onDeselectAll: function() {
            alert('onDeselectAll triggered!');
        }
    });
    // 第六十一示例 enableFiltering
    $('#example-enableFiltering').multiselect({
        enableFiltering: true
    });
    // 第六十二示例 enableFiltering
    $('#example-enableFiltering-includeSelectAllOption').multiselect({
        includeSelectAllOption: true,
        enableFiltering: true
    });
    // 第六十三示例 enableFiltering
    $('#example-enableFiltering-optgroups').multiselect({
        enableFiltering: true
    });
    // 第六十四示例 enableFiltering
    $('#example-enableFiltering-enableClickableOptGroups').multiselect({
        enableFiltering: true,
        enableClickableOptGroups: true
    });
    // 第六十五示例 enableFiltering
    $('#example-enableFiltering-onChange-onDropdownHide').multiselect({
        enableFiltering: true,
        onChange: function(option, checked) {
            alert('onChange!');
        },
        onDropdownHide: function(event) {
            alert('onDropdownHide!');
        }
    });
    // 第六十六示例 enableCaseInsensitiveFiltering
    $('#example-enableCaseInsensitiveFiltering').multiselect({
        enableCaseInsensitiveFiltering: true
    });
    // 第六十七示例 enableFullValueFiltering
    $('#example-enableFullValueFiltering').multiselect({
        enableFiltering: true,
        enableFullValueFiltering: true
    });
    // 第六十八示例 filterBehavior
    $('#example-filterBehavior').multiselect({
        enableFiltering: true,
        filterBehavior: 'value'
    });
    // 第六十九示例 filterPlaceholder
    $('#example-filter-placeholder').multiselect({
        enableFiltering: true,
        filterPlaceholder: 'Search for something...'
    });
    // 第七十示例 includeResetOption
    $('#example-include-reset-option').multiselect({
        includeResetOption: true
    });
    // 第七十一示例 includeResetDivider
    $('#example-include-reset-divider').multiselect({
        includeResetOption: true,
        includeResetDivider: true
    });
    // 第七十二示例 resetText
    $('#example-reset-text').multiselect({
        includeResetOption: true,
        resetText: "Reset all"
    });
    // 第七十三示例 
    $('#example-templates-button').multiselect({
        buttonContainer: '<div></div>',
        buttonClass: '',
        templates: {
            button: '<span class="multiselect dropdown-toggle" data-toggle="dropdown">Click me!</span>'
        }
    });
    // 第七十四示例 
    $('#example-templates-input').multiselect({
        templates: {
            li: '<li><a><label style="display:inline;"></label><input type="text" /></a></li>'
        }
    });
    // 第七十五示例 
    $('#example-destroy').multiselect();
    $('#example-destroy-button').on('click', function() {
        $('#example-destroy').multiselect('destroy');
    });
    // 第七十六示例 
    $('#example-refresh').multiselect();
 
    $('#example-refresh-select').on('click', function() {
        $('option[value="1"]', $('#example-refresh')).prop('selected', true);
        $('option[value="3"]', $('#example-refresh')).prop('selected', true);
        $('option[value="4"]', $('#example-refresh')).prop('selected', true);
 
        alert('Option 1, 2 and 4.');
    });
 
    $('#example-refresh-deselect').on('click', function() {
        $('option', $('#example-refresh')).each(function(element) {
            $(this).removeAttr('selected').prop('selected', false);
        });
    });
 
    $('#example-refresh-button').on('click', function() {
        $('#example-refresh').multiselect('refresh');
    });
    // 第七十七示例 
    $('#example-rebuild').multiselect();
 
    $('#example-rebuild-button').on('click', function() {
        $('#example-rebuild').multiselect('rebuild');
    });
 
    $('#example-rebuild-add').on('click', function() {
        $('#example-rebuild').append('<option value="add1">Addition 1</option><option value="add2">Addition 2</option><option value="add3">Addition 3</option>');
    });
 
    $('#example-rebuild-delete').on('click', function() {
        $('option[value="add1"]', $('#example-rebuild')).remove();
        $('option[value="add2"]', $('#example-rebuild')).remove();
        $('option[value="add3"]', $('#example-rebuild')).remove();
    });
    // 第七十八示例 
    $('#example-select').multiselect();
 
    $('#example-select-button').on('click', function() {
        $('#example-select').multiselect('select', ['1', '2', '4']);
 
        alert('Selected 1, 2 and 4.');
    });
    // 第七十九示例 
    $('#example-select-onChange').multiselect({
        onChange: function(option, checked, select) {
            alert('onChange triggered ...');
        }
    });
 
    $('#example-select-onChange-button').on('click', function() {
        $('#example-select-onChange').multiselect('select', '1', true);
    });
    // 第八十示例 
    $('#example-select-onChange-array').multiselect({
        onChange: function(option, checked, select) {
            alert('onChange triggered ...');
        }
    });
 
    $('#example-select-onChange-array-button').on('click', function() {
        $('#example-select-onChange-array').multiselect('select', ['1', '3'], true);
    });
    // 第八十一示例 
    $('#example-deselect').multiselect();
    
    $('#example-deselect-button').on('click', function() {
        $('#example-deselect').multiselect('deselect', ['1', '2', '4']);
    
        alert('Deselected 1, 2 and 4.');
    });
    // 第八十二示例 
    $('#example-deselect-onChange').multiselect({
        onChange: function(option, checked, select) {
            alert('onChange triggered ...');
        }
    });
    
    $('#example-deselect-onChange-button').on('click', function() {
        $('#example-deselect-onChange').multiselect('deselect', '1', true);
    });
    // 第八十三示例 
    $('#example-deselect-onChange-array').multiselect({
        onChange: function(option, checked, select) {
            alert('onChange triggered ...');
        }
    });
    
    $('#example-deselect-onChange-array-button').on('click', function() {
        $('#example-deselect-onChange-array').multiselect('deselect', '1', true);
    });
    // 第八十四示例 
    $('#example-selectAll').multiselect();
    
    $('#example-selectAll-visible').on('click', function() {
        $('#example-selectAll').multiselect('selectAll', true);
        $('#example-selectAll').multiselect('updateButtonText');
    });
    $('#example-selectAll-all').on('click', function() {
        $('#example-selectAll').multiselect('selectAll', false);
        $('#example-selectAll').multiselect('updateButtonText');
    });
    // 第八十五示例 
    $('#example-deselectAll').multiselect();
    
    $('#example-deselectAll-visible').on('click', function() {
        $('#example-deselectAll').multiselect('deselectAll', true);
        $('#example-deselectAll').multiselect('updateButtonText');
    });
    $('#example-deselectAll-all').on('click', function() {
        $('#example-deselectAll').multiselect('deselectAll', false);
        $('#example-deselectAll').multiselect('updateButtonText');
    });
    // 第八十六示例 
    $('#example-updateButtonText').multiselect({
        buttonContainer: '<div class="btn-group" id="example-updateButtonText-container"></div>'
    });
    $('#example-updateButtonText-select').on('click', function() {
        $('option[value="1"]', $('#example-updateButtonText')).prop('selected', true);
        $('option[value="3"]', $('#example-updateButtonText')).prop('selected', true);
        $('input[value="1"]', $('#example-updateButtonText-container')).prop('checked', true);
        $('input[value="3"]', $('#example-updateButtonText-container')).prop('checked', true);
        $('input[value="1"]', $('#example-updateButtonText-container')).closest('li').addClass('active');
        $('input[value="3"]', $('#example-updateButtonText-container')).closest('li').addClass('active');
    });
    $('#example-updateButtonText-update').on('click', function() {
        $('#example-updateButtonText').multiselect('updateButtonText');
    });
    // 第八十七示例 
    var firstConfigurationSet = {
        includeSelectAllOption: false,
        enableFiltering: false
    };
    var secondConfigurationSet = {
        includeSelectAllOption: false,
        enableFiltering: true
    };
    
    var set = 1;
    $('#example-setOptions').multiselect(firstConfigurationSet);
    
    function rebuildMultiselect(options) {
        $('#example-setOptions').multiselect('setOptions', options);
        $('#example-setOptions').multiselect('rebuild');
    }
    
    $('#example-setOptions-button').on('click', function(event) {
        switch (set) {
            case 2:
                rebuildMultiselect(firstConfigurationSet);
    
                $(this).text('Configuration Set 2');
                set = 1;
                break;
            case 1:
            default:
                rebuildMultiselect(secondConfigurationSet);
    
                $(this).text('Configuration Set 1');
                set = 2;
                break;
    
        }
    });
    // 第八十八示例 
    $('#example-disable').multiselect();
    
    $('#example-disable-button').on('click', function() {
        $('#example-disable').multiselect('disable');
    });
    // 第八十九示例 
    $('#example-enable').multiselect();
    
    $('#example-enable-button').on('click', function() {
        $('#example-enable').multiselect('enable');
    });
    // 第九十示例 
    $('#example-dataprovider').multiselect();
 
    var options = [
        {label: 'Option 1', title: 'Option 1', value: '1', selected: true},
        {label: 'Option 2', title: 'Option 2', value: '2'},
        {label: 'Option 3', title: 'Option 3', value: '3', selected: true},
        {label: 'Option 4', title: 'Option 4', value: '4'},
        {label: 'Option 5', title: 'Option 5', value: '5'},
        {label: 'Option 6', title: 'Option 6', value: '6', disabled: true}
    ];
    $('#example-dataprovider').multiselect('dataprovider', options);
    // 第九十一示例 
    $('#example-dataprovider-optgroups').multiselect();
 
    var optgroups = [
        {
            label: 'Group 1', children: [
                {label: 'Option 1.1', value: '1-1', selected: true},
                {label: 'Option 1.2', value: '1-2'},
                {label: 'Option 1.3', value: '1-3'}
            ]
        },
        {
            label: 'Group 2', children: [
                {label: 'Option 2.1', value: '1'},
                {label: 'Option 2.2', value: '2'},
                {label: 'Option 2.3', value: '3', disabled: true}
            ]
        }
    ];
    $('#example-dataprovider-optgroups').multiselect('dataprovider', optgroups);
    // 第九十二示例 
    $('#example-dataprovider-data-attributes').multiselect();
 
    var optionsData =[
      {
        "label": "Option 1",
        "value": 1,
        "selected": true,
        "attributes": {
          "some-attribute": 1,
          "another-attribute": false
        }
      },
      {
        "label": "Option 2",
        "value": 2,
        "selected": false,
        "attributes": {
          "some-attribute": 2
        }
      }
    ];
    $("#example-dataprovider-data-attributes").multiselect('dataprovider', optionsData);
    // 第九十三示例 
    $('#example-set-all-selected-text').multiselect({allSelectedText: "Initial All Selected"});
 
    $('#new-all-selected-text-btn').click(function(){
        $('#example-set-all-selected-text').multiselect('setAllSelectedText', $('#new-all-selected-text-box').val());
    });
    // 第九十四示例 
    $('#example-confirmation').multiselect({
        onChange: function(element, checked) {
            if (checked === true) {
                //action taken here if true
            }
            else if (checked === false) {
                if (confirm('Do you wish to deselect the element?')) {
                    //action taken here
                }
                else {
                    $("#example-confirmation").multiselect('select', element.val());
                }
            }
        }
    });
    // 第九十五示例 
    var lastSelected = $('#example-confirmation-single option:selected').val();
    $('#example-confirmation-single').multiselect({
        onChange: function(element, checked) {
            if (confirm('Do you wish to change the selection?')) {
                lastSelected = element.val();
            }
            else {
                $("#example-confirmation-single").multiselect('select', lastSelected);
                $("#example-confirmation-single").multiselect('deselect', element.val());
            }
        }
    });
    // 第九十六示例 
    $('#example-limit').multiselect({
        onChange: function(option, checked) {
            // Get selected options.
            var selectedOptions = $('#example-limit option:selected');
 
            if (selectedOptions.length >= 4) {
                // Disable all other checkboxes.
                var nonSelectedOptions = $('#example-limit option').filter(function() {
                    return !$(this).is(':selected');
                });
 
                nonSelectedOptions.each(function() {
                    var input = $('input[value="' + $(this).val() + '"]');
                    input.prop('disabled', true);
                    input.parent('li').addClass('disabled');
                });
            }
            else {
                // Enable all checkboxes.
                $('#example-limit option').each(function() {
                    var input = $('input[value="' + $(this).val() + '"]');
                    input.prop('disabled', false);
                    input.parent('li').addClass('disabled');
                });
            }
        }
    });
    // 第九十七示例 
    var orderCount = 0;
    $('#example-order').multiselect({
        onChange: function(option, checked) {
            if (checked) {
                orderCount++;
                $(option).data('order', orderCount);
            }
            else {
                $(option).data('order', '');
            }
        },
        buttonText: function(options) {
            if (options.length === 0) {
                return 'None selected';
            }
            else if (options.length > 3) {
                return options.length + ' selected';
            }
            else {
                var selected = [];
                options.each(function() {
                    selected.push([$(this).text(), $(this).data('order')]);
                });
    
                selected.sort(function(a, b) {
                    return a[1] - b[1];
                });
    
                var text = '';
                for (var i = 0; i < selected.length; i++) {
                    text += selected[i][0] + ', ';
                }
    
                return text.substr(0, text.length -2);
            }
        },
    });
    
    $('#example-order-button').on('click', function() {
        var selected = [];
        $('#example-order option:selected').each(function() {
            selected.push([$(this).val(), $(this).data('order')]);
        });
    
        selected.sort(function(a, b) {
            return a[1] - b[1];
        });
    
        var text = '';
        for (var i = 0; i < selected.length; i++) {
            text += selected[i][0] + ', ';
        }
        text = text.substring(0, text.length - 2);
    
        alert(text);
    });
    // 第九十八示例 
    $('#example-simulate-single').multiselect({
        onChange: function(option, checked) {
            var values = [];
            $('#example-simulate-single option').each(function() {
                if ($(this).val() !== option.val()) {
                    values.push($(this).val());
                }
            });
    
            $('#example-simulate-single').multiselect('deselect', values);
        }
    });
    // 第九十九示例 
    $('#example-reset').multiselect();
    $('#example-reset-form').on('reset', function() {
        $('#example-reset option:selected').each(function() {
            $(this).prop('selected', false);
        })
    
        $('#example-reset').multiselect('refresh');
    });
    // 第一百示例 
    $('#example-modal').multiselect();
    // 第一百零一示例 
    $('#example-collapse').multiselect();
    // 第一百零二示例 
    $('#example-large-enable').on('click', function() {
        var options = $('#example-large-options').val();
    
        if (options < 1 || options > 5000) {
            $('#example-large-error').html('<p class="alert alert-error">Choose between 1 and 5000 options!</p>');
        }
        else {
            $('#example-large-includeSelectAllOption').html('');
            $('#example-large-includeSelectAllOption-enableFiltering').html('');
            $('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').html('');
            $('#example-large-reset').html('');
    
            for (var j = 0; j < options; j++) {
                i = j + 1;
                $('#example-large-includeSelectAllOption').append('<option value="' + i.toString() + '">Option ' + i.toString() + '</option>');
                $('#example-large-includeSelectAllOption-enableFiltering').append('<option value="' + i.toString() + '">Option ' + i.toString() + '</option>');
    
                var group = Math.floor(j/10) + 1;
                var number = j % 10 + 1;
                if (number === 1) {
                    $('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').append('<optgroup label="Group ' + group.toString() + '"></optgroup>');
                }
                $('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').append('<option value="' + group.toString() + '-' + number.toString() + '">Option ' + group.toString() + '.' + number.toString() + '</option>');
    
                $('#example-large-reset').append('<option value="' + i.toString() + '">Option ' + i.toString() + '</option>');
            }
    
            $('#example-large-includeSelectAllOption').multiselect({
                maxHeight: 200,
                includeSelectAllOption: true
            });
    
            $('#example-large-includeSelectAllOption-enableFiltering').multiselect({
                maxHeight: 200,
                includeSelectAllOption: true,
                enableFiltering: true
            });
    
            $('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').multiselect({
                maxHeight: 200,
                includeSelectAllOption: true,
                enableFiltering: true,
                enableClickableOptGroups: true
            });
    
            $('#example-large-reset').multiselect({
                maxHeight: 200,
                includeSelectAllOption: true
            });
    
            $('#example-large-reset-form').on('reset', function() {
                $('#example-large-reset').multiselect('deselectAll', false);
                $('#example-large-reset').multiselect('updateButtonText');
            });
        }
    });
    // 第一百零三示例 
    var data = [];
    for (var i = 0; i < 100; i++) {
        var group = {label: 'Group ' + (i + 1), children: []};
        for (var j = 0; j < 10; j++) {
            group['children'].push({
                label: 'Option ' + (i + 1) + '.' + (j + 1),
                value: i + '-' + j
            });
        }
 
        data.push(group);
    }
 
    $('#example-large-dataprovider-button').on('click', function() {
        $('#example-large-dataprovider').multiselect({
            maxHeight: 200
        });
        $('#example-large-dataprovider').multiselect('dataprovider', data);
    });
    // 第一百零四示例 
    $('#example-disable-javascript').multiselect({
        includeSelectAllOption: true
    });
    $('#example-disable-javascript-disable').on('click', function() {
        var input = $('#example-disable-javascript-container input[value="3"]');
        var option = $('#example-disable-javascript-container option[value="3"]');
        input.prop('disabled', true);
        option.prop('disabled', true);
        input.parent('label').parent('a').parent('li').addClass('disabled');
    });
    $('#example-disable-javascript-check').on('click', function() {
        var options = '';
        $('#example-disable-javascript option:selected').each(function() {
            options += $(this).val() + ', ';
        });
        alert(options.substr(0, options.length - 2));
    });
    // 第一百零五示例 
    $('#example-large-refresh-button').on('click', function() {
        for (var i = 0; i < 1000; i++) {
            $('#example-large-refresh').append('<option value="' + i + '">Option ' + i + '</option>');
        }
    
        $('#example-large-refresh').multiselect();
    });
    
    $('#example-large-refresh-refresh').on('click', function() {
        $('#example-large-refresh').multiselect('refresh');
    });
    
    $('#example-large-refresh-select').on('click', function() {
        var count = 0;
    
        $('#example-large-refresh option').each(function() {
            var i = $(this).val();
    
            if (i%2 == 0) {
                $(this).prop('selected', true);
                count++;
            }
    
        });
    
        alert('Selected ' + count + ' options!');
    });
    // 第一百零六示例 
    $('#example-optgroup-limit').multiselect({
        onChange: function(options, checked) {
            var $option = $(options);
            if ($option.length == 1) {
    
                var $group = $option.parent('optgroup')
                if ($group.hasClass('group-1')) {
                    var $options = $('option', $group);
                    $options = $options.filter(':selected');
    
                    if (checked && $options.length > 2) {
                        alert('Cannot select more than 2 elements in this group!');
                        $("#example-optgroup-limit").multiselect('deselect', $option.val());
                    }
                }
            }
        }
    });
    // 第一百零七示例 
    $('#example-optgroup-buttonText').multiselect({
        buttonText: function(options, select) {
    
            // First consider the simple cases, i.e. disabled and empty.
            if (this.disabledText.length > 0
                    && (this.disableIfEmpty || select.prop('disabled'))
                    && options.length == 0) {
    
                return this.disabledText;
            }
            else if (options.length === 0) {
                return this.nonSelectedText;
            }
    
            var $select = $(select);
            var $optgroups = $('optgroup', $select);
    
            var delimiter = this.delimiterText;
            var text = '';
    
            // Go through groups.
            $optgroups.each(function() {
                var $selectedOptions = $('option:selected', this);
                var $options = $('option', this);
    
                if ($selectedOptions.length == $options.length) {
                    text += $(this).attr('label') + delimiter;
                }
                else {
                    $selectedOptions.each(function() {
                        text += $(this).text() + delimiter;
                    });
                }
            });
    
            var $remainingOptions = $('option:selected', $select).not('optgroup option');
            $remainingOptions.each(function() {
                text += $(this).text() + delimiter;
            });
    
            return text.substr(0, text.length - 2);
        }
    });
    // 第一百零八示例 
    $('#example-selected-parents').multiselect({
        buttonContainer: '<div id="example-selected-parents-container" class="btn-group"></div>',
        onChange: function(options, selected) {
            // Get checkbox corresponding to option:
            var value = $(options).val();
            var $input = $('#example-selected-parents-container input[value="' + value + '"]');
    
            // Adapt label class:
            if (selected) {
                $input.closest('label').addClass('active');
            }
            else {
                $input.closest('label').removeClass('active');
            }
        }
    });
    // 第一百零九示例 
    $('#example-clear-after-filter-selection').multiselect({
        buttonContainer: '<div id="example-clear-after-filter-selection-container" class="btn-group"></div>',
        enableFiltering: true,
        onChange: function($option) {
            // Check if the filter was used.
            var query = $('#example-clear-after-filter-selection-container li.multiselect-filter input').val();
    
            if (query) {
                $('#example-clear-after-filter-selection-container li.multiselect-filter input').val('').trigger('keydown');
            }
        }
    });
    // 第一百一十示例 
    $('#example-automatic-dropup').multiselect({
        buttonContainer: '<div id="example-automatic-dropup-container" class="btn-group"></div>',
        maxHeight: 200,
    });
    $(window).scroll(function() {
        var top = $('#example-automatic-dropup-container')[0].getBoundingClientRect().top
        var bottom = $(window).height() - top - $('#example-automatic-dropup-container').height();
        if (bottom < 250) {
            $('#example-automatic-dropup-container').addClass('dropup');
        }
        if (bottom > 250) {
            $('#example-automatic-dropup-container').removeClass('dropup');
        }
    });
    // 第一百一十一示例 
    $('#example-checkbox-list').multiselect({
        buttonContainer: '<div id="example-checkbox-list-container" class="btn-group"></div>',
        buttonClass: '',
        templates: {
            button: '',
            ul: '<ul class="multiselect-container checkbox-list"></ul>',
        }
    });
    // 第一百一十二示例 
    $('#example-post').multiselect({
        includeSelectAllOption: true,
        enableFiltering: true
    });
    // 第一百一十三示例 
    $('#example-post-checkboxName').multiselect({
        checkboxName: function(option) {
            var $optgroup = $(option).closest('optgroup');
            if ($optgroup.id == 'example-post-checkboxName-1') {
                return 'group1[]';
            }
            else {
                return 'group2[]';
            }
        }
    });
});
</script>
</body>
</html>